Angular2 FlashBoxComponent

Aplikasi Contoh Komponen Angular2-Flashbox

Komponen Flashbox adalah komponen Angular2 yang disediakan untuk menampilkan pesan informasi pengguna yang sederhana.

Skeleton aplikasi yang digunakan untuk pengembangan dapat ditemukan di sini Angular2 - Skeleton Aplikasi

Prasyarat

Harus menginstal Node dan NPM.

Cara Memulai Aplikasi

Instal Node Dependencies di Direktori Root Proyek Anda (di sinilah file 'package.json' berada) menggunakan:

$ npm install

Instal Definisi TypeScript Menggunakan:

$ typings install

Mulai aplikasi dengan

$ gulp

Aplikasi akan dikompilasi dan dimulai secara awal. Secara default server mendengarkan pada port 3000. Aplikasi dapat diakses melalui browser web Anda di URL LocalHost: 3000 .

Cara menggunakan komponen flashbox

Komponen FlashBox adalah (untuk saat ini saja) bagian dari modul Common Components.

Untuk menggunakan modul, Anda harus mengkonfigurasi pemuatan modul Anda. Jika Anda menggunakan Modul Loader SystemJS , tambahkan peta berikut:

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

Dalam modul aplikasi Anda Definisi Definisi Impor modul CommonComponents Common.

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

Sekarang kita dapat menggunakan komponen FlashBox dalam modul kami Template Komponen Menggunakan Elemen.

Tempatkan pesan informasi pengguna berbasis HTML Anda di dalam elemen flash-box .

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

Input

Atribut

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

Tindakan

1. Jenis: String , Default: Primer Tentukan jenis kotak flash. Jenis yang Tersedia: Default , Primer , Sukses , Info , Peringatan , Bahaya Berdasarkan Jenis Label Bootstrap Default

2. Posisi: String , default: tr . Tentukan posisi kotak flash. Nilai yang tersedia:

• TR - Top -Right,
• TM - Top -Middle,
• TL - kiri atas,
• CR - tengah -kanan,
• CM - tengah -tengah,
• CL - kiri tengah,
• BR - Right Bawah,
• BM - Bottom -Middle,
• BL - kiri bawah

3. Max-Width: String , Default: 300px Tentukan max-lebar komponen kotak flash

4. Nomor setTimeout , default: 2000 Tentukan batas waktu (jumlah MS kontrol terlihat) di MS . Default adalah 2 detik .

Tindakan

Untuk menyebabkan tindakan kontrol kotak flash, gunakan sistem variabel lokal Templat2 Template.

Contoh template

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

Contoh pengontrol

komponen referensi

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

komponen referensi dari variabel lokal template menggunakan

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

Tindakan yang tersedia:

1. FlashOnce (): void - Tampilkan FlashBox hanya sekali untuk jumlah waktu yang tepat
2. show (): void - buat kontrol terlihat untuk jumlah waktu yang tidak terbatas (atau sampai beberapa tindakan lain terjadi)
3. hide (): void - buat kontrol tersembunyi untuk jumlah waktu yang tidak terbatas (atau sampai beberapa tindakan lain terjadi)
4. startflashing (): void - Mulai berkedip untuk waktu yang tidak terbatas (atau sampai beberapa tindakan lain terjadi). Periode transisi dari Unvisble ke Visible diatur ke 0,5 detik dan saat ini tidak dapat dikonfigurasi. Kontrol FlashBox yang kami tunjukkan untuk jumlah waktu tivetout .
5. stopflashing (): void - berhenti berkedip