Popover
Panel kecil berjangkar pada kontrolnya, untuk keterangan yang bisa diklik, filter singkat, atau satu form pendek.
Dasar
Isinya bebas, termasuk tautan dan tombol — itu bedanya dengan Tooltip, yang muncul saat hover dan tidak boleh memuat apa pun yang bisa diklik. Panelnya dibuka dengan klik atau Panah bawah↓, dan ditutup dengan EscapeEsc, klik di luar, atau tombol di dalamnya.
Filter dan form pendek
Dengan width tetap dan autofocus pada kontrol pertama, panel ini menjadi tempat yang wajar untuk dua atau tiga kolom filter. close dari slot menutupnya setelah filter diterapkan.
Untuk form yang lebih panjang atau lebih penting, naikkan ke Drawer atau Modal: panel ini tidak mengurung fokus, dan halaman di belakangnya tetap bisa dipakai.
Belum ada filter.
Pemicu sendiri
Slot #trigger memberi attrs yang sudah membawa aria-haspopup, aria-expanded, dan aria-controls — sambungkan ke kontrol apa pun, misalnya ikon tanya di samping sebuah angka.
Berat tercatat 2,1 ton
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| v-model:open | boolean | false | Membuka dan menutup dari kode. |
| title | string | — | Judul di dalam panel, sekaligus nama aksesibelnya. Tanpa judul, nama diambil dari label. |
| label | string | — | Nama panel bila tidak ada judul yang terlihat. Tanpa keduanya, nama pemicunya yang dipakai. |
| align | 'start' | 'center' | 'end' | 'start' | Tepi pemicu yang disejajarkan. end untuk pemicu di ujung kanan baris, supaya panel membuka ke arah tengah layar. |
| side | 'bottom' | 'top' | 'bottom' | Sisi yang dicoba lebih dulu. Sisi lain dipakai hanya bila ruangnya lebih lega. |
| width | number | 'auto' | 'auto' | Lebar tetap dalam piksel, atau auto supaya isinya yang menentukan. |
| maxWidth | number | 320 | Batas lebar, supaya teks panjang membungkus. |
| arrow | boolean | true | Penunjuk kecil yang tetap mengarah ke pemicunya. |
| triggerText / triggerLabel | string | — / 'Keterangan' | Teks pemicu bawaan, dan nama aksesibelnya bila pemicunya hanya ikon. |
| color / variant / size / icon | W4cButtonColor / W4cButtonVariant / W4cButtonSize / string | 'neutral' / 'outline' / 'md' / — | Diteruskan ke Button pemicu bawaan. |
| disabled | boolean | false | Pemicu mati. Bila dimatikan saat panel terbuka, panelnya ikut tertutup. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| default | { close } | — | Isi panel. close menutupnya dan mengembalikan fokus. |
| trigger | { open, attrs, toggle } | — | Mengganti pemicu bawaan. Sambungkan attrs ke kontrol sendiri supaya aria-expanded dan aria-controls tetap benar. |
| title | — | — | Mengganti judul panel. |
Panelnya role="dialog" yang tidak modal: fokus pindah ke dalamnya saat dibuka dan kembali ke pemicunya saat ditutup, tetapi halaman di belakangnya tidak dijadikan inert. Posisinya diatur lib/floating-panel.ts, utilitas yang sama dengan DropdownMenu, FormSelect, dan Tooltip: panel memakai Popover API sehingga tidak terpotong oleh kartu yang meng-overflow.