Messaging/Flag (AppFlag)
Flag (AppFlag)
● Needs Review Web Nuxt 4 + Mobile React Native
Notifikasi mengambang (Floating Toast / Banner) khas Atlassian untuk konfirmasi aksi sukses, peringatan sistem, atau pesan kesalahan jaringan.
<AppFlag appearance="success" title="…" @dismiss="…" />
Appearance & Aksi
Pakai success untuk mengonfirmasi hasil aksi pengguna (tersimpan, terkirim), warning untuk kondisi yang butuh perhatian tapi belum gagal (koneksi tidak stabil), dan error/normal sesuai kebutuhan. Tambahkan action-label hanya kalau ada satu langkah lanjutan yang jelas ("Lihat Lembar Jawaban") — jangan jadikan Flag tempat menaruh banyak pilihan aksi, itu tugas Modal atau halaman penuh.
Flag Notifications Gallery
Jawaban Berhasil Disimpan
Progres pengerjaan soal nomor 1 s/d 45 telah tersinkronisasi ke server.
Koneksi Internet Tidak Stabil
Sedang mencoba menghubungkan ulang ke server CBT...
Props & API Reference
5 properties| Property | Type | Default | Deskripsi |
|---|---|---|---|
| appearance | 'info' | 'success' | 'warning' | 'error' | 'normal' | 'info' | Warna ikon dan aksen sesuai jenis notifikasi. |
| title * | string | — | Judul singkat — kata pertama yang dibaca pengguna. |
| description | string | — | Detail satu-dua kalimat di bawah judul. |
| isDismissible | boolean | true | Menampilkan tombol tutup (✕) di pojok kanan. |
| actionLabel | string | — | Jika diisi, menampilkan tombol teks aksi di bawah deskripsi. |
Events & Emits API
2 events| Event Name | Payload Type | Deskripsi |
|---|---|---|
| dismiss | void | Dipicu saat tombol tutup (✕) ditekan. |
| action | void | Dipicu saat tombol actionLabel ditekan. |
Slots API
1 slots| Slot Name | Scoped Props | Deskripsi |
|---|---|---|
| #default | — | Konten tambahan opsional di bawah description (jarang dipakai — utamakan prop description). |