Angular2 FlashBoxComponent

Angular2-Flashbox 구성 요소 예제 응용 프로그램

FlashBox 구성 요소는 간단한 사용자 정보 메시지를 표시하기 위해 제공된 Angular2 구성 요소입니다.

개발에 사용되는 응용 스켈레톤은 여기에서 찾을 수 있습니다.

전제 조건

노드와 NPM이 설치되어 있어야합니다.

응용 프로그램을 시작하는 방법

프로젝트 루트 디렉토리에 노드 종속성을 설치하십시오 (이것은 'package.json 파일이 위치한 위치)를 사용합니다.

$ npm install

다음을 사용하여 TypeScript 정의를 설치합니다.

$ typings install

로 신청서를 시작하십시오

$ gulp

응용 프로그램은 처음으로 편집하고 시작됩니다. 기본적으로 서버는 포트 3000에서 듣고 있습니다. URL LocalHost 의 웹 브라우저를 통해 응용 프로그램에 액세스 할 수 있습니다.

Flashbox 구성 요소를 사용하는 방법

FlashBox 구성 요소는 CommonComponents 모듈의 일부입니다.

모듈을 사용하려면 모듈 로더를 구성해야합니다. SystemJS 모듈 로더를 사용하는 경우 다음 맵핑을 추가합니다.

 System.config({
    ...
    map: {
        'commoncomponents': 'node_modules/commoncomponents'
    }
    ...
})

응용 프로그램 모듈 정의 파일에서 CommonComponents 모듈 가져 오기.

 ... 
Import { CommonComponentsModule} from '/commoncomponents/commoncomponents.module';
...
@NgModule({
    ...
     imports:      [ CommonComponentsModule ],
    ...
})

이제 요소를 사용하여 모듈 선언 된 구성 요소 템플릿에서 FlashBox 구성 요소를 사용할 수 있습니다.

HTML 기반 사용자 정보 메시지를 Flash-Box 요소 내에 배치하십시오.

 <flash-box>
        <!-- Message -->
</flash-box> 

입력

속성

    <flash-box [type]="type_value" [position]="position_value" [max-width]="maxwidth_value" [setTimeout]="setTimeout_value>
        HTML message
    </flash-box>    

행위

1. 유형 : 문자열 , 기본값 : 기본 플래시 박스 유형을 지정합니다. 사용 가능한 유형 : 기본 부트 스트랩 레이블 유형을 기반으로 한 기본 , 기본 , 성공 , 정보 , 경고 , 위험

2. 위치 : 문자열 , 기본값 : tr . 플래시 상자의 위치를 ​​지정합니다. 사용 가능한 값 :

• tr- 오른쪽, 오른쪽,
• TM- 최고 중간,
• TL- 왼쪽 상단,
• CR- 오른쪽 중심,
• CM- 중심 중심,
• CL- 중앙 좌파,
• Br- 바닥 오른쪽,
• BM- 하단 중간,
• BL- 하단 왼쪽

3. max-width : String , default : 300px 플래시 박스 구성 요소의 최대 세포 지정

4. Settimeout 번호 , 기본값 : 2000 MS 에서 시간 초과 ( MS 컨트롤 수)를 지정합니다. 기본값은 2 초 입니다.

행위

FlashBox 제어 조치를 유발하기 위해 Angular2 템플릿 로컬 변수 시스템을 사용하십시오.

템플릿 예제

    <flash-box .... #tlv_name>
        ....
    </flash-box>
    
    <button (click)="tlv_name.available_action">Cause flashbox action</button>

컨트롤러 예

참조 구성 요소

 import { FlashBoxComponent } from 'commoncomponents/components/flashbox.component';

템플릿 로컬 변수를 사용하여 참조 구성 요소

 @ViewChild("tlv_name") tlv:FlashBoxComponent;
tlv_name.available_action();

사용 가능한 조치 :

1. Flashonce () : void -show flashbox show settimeout 시간에 대해 한 번만 표시
2. show () : void- 무제한 시간 동안 제어를 보이게하십시오 (또는 다른 조치가 발생할 때까지)
3. hide () : void- 무제한 시간 동안 제어를 숨기십시오 (또는 다른 조치가 발생할 때까지)
4. startflashing () : void- 무제한 시간 동안 깜박임을 시작하십시오 (또는 다른 조치가 발생할 때까지). 허용되지 않는에서 가시성으로의 전환 기간은 0,5 초로 설정되며 현재는 설득력이 없습니다. Flashbox 컨트롤은 설정 시간이 시간 동안 표시됩니다.
5. stopflashing () : void- 깜박임 중지