Labels/Tag & Tag Group (AppTag)
Tag & Tag Group (AppTag)
● Needs Review Web Nuxt 4 + Mobile React Native
Elemen label kategori yang dapat diklik atau dihapus (removable) untuk filter katalog paket latihan.
<AppTagGroup><AppTag text="…" :is-removable="true" /></AppTagGroup>
Tag Group & Warna
Bungkus selalu dengan <AppTagGroup> agar jarak antar-tag konsisten dan wrap ke baris baru rapi. Pakai color="primary" untuk menonjolkan satu tag yang paling relevan (mis. filter yang baru dipilih pengguna), dan biarkan sisanya standard — menyamaratakan semua tag jadi primary menghilangkan gunanya sebagai penanda urutan/prioritas.
Tag Group Playground
SKD CPNSTIU BerhitungPassing Grade 2026Modul Resmi
AppTag Props
3 properties| Property | Type | Default | Deskripsi |
|---|---|---|---|
| text * | string | — | Label teks tag. |
| isRemovable | boolean | false | Menampilkan tombol hapus (×) di ujung kanan tag. |
| color | 'standard' | 'primary' | 'green' | 'amber' | 'red' | 'standard' | Palet warna latar dan teks tag. |
AppTag Events
2 events| Event Name | Payload Type | Deskripsi |
|---|---|---|
| remove | void | Dipicu saat tombol hapus (×) ditekan. |
| click | void | Dipicu saat badan tag (bukan tombol hapus) diklik. |
AppTagGroup Slots
1 slots| Slot Name | Scoped Props | Deskripsi |
|---|---|---|
| #default | — | Kumpulan <AppTag> yang akan disusun flex-wrap dengan jarak antar-tag konsisten. |