Messaging/Banner (AppBanner)
Banner (AppBanner)
● Needs Review Web Nuxt 4 + Mobile React Native
Spanduk pengumuman layar penuh di bagian paling atas aplikasi untuk mengumumkan maintenance server atau try out akbar serentak.
<AppBanner appearance="announcement">…</AppBanner>
Appearance
announcement untuk kabar netral atau positif yang berlaku ke semua pengguna (jadwal try out serentak), warning untuk kondisi terjadwal yang perlu diantisipasi (pemeliharaan mendatang), dan error untuk gangguan yang sedang berlangsung. Karena banner mengambil alih baris paling atas aplikasi, jangan tampilkan dua banner sekaligus — kalau ada dua kondisi aktif bersamaan, tampilkan yang paling mendesak (error > warning > announcement) dan simpan sisanya untuk Section Message di halaman terkait.
Banner Variants
Try Out Akbar Nasional CPNS 2026 dibuka serentak Sabtu, 20 Agustus pukul 09:00 WIB!
Pemeliharaan server terjadwal akan berlangsung pada pukul 23:00 – 01:00 WIB.
Terjadi gangguan koneksi server CBT. Mohon jangan refresh halaman.
Props & API Reference
2 properties| Property | Type | Default | Deskripsi |
|---|---|---|---|
| appearance | 'announcement' | 'warning' | 'error' | 'announcement' | Menentukan warna latar banner dan warna teks kontras (announcement/error: putih di atas warna solid; warning: teks ink agar tetap AA-safe). |
| isOpen | boolean | true | Mengontrol apakah banner dirender. Komponen tidak punya tombol tutup sendiri — parent yang memegang state ini. |
Slots API
1 slots| Slot Name | Scoped Props | Deskripsi |
|---|---|---|
| #default | — | Ikon + teks pengumuman. Komponen tidak menyediakan ikon otomatis, jadi sertakan AppIcon secara eksplisit seperti pada contoh. |