Drawer
Panel yang masuk dari tepi layar untuk detail, filter, atau form pendek — tanpa meninggalkan halaman yang sedang dibaca.
Dasar
v-model membuka panel, dan isinya bebas. Aksi ditaruh di slot #footer supaya tetap terlihat walau isinya digulir.
Sisi dan ukuran
Panel kanan untuk detail baris yang sedang dilihat, panel kiri untuk navigasi, panel bawah untuk pilihan singkat di HP. size mengatur lebar untuk panel samping dan tinggi untuk panel atas atau bawah.
Form di dalam panel
Taruh autofocus pada kolom pertama: tanpa itu fokus jatuh ke panel, yang benar untuk panel baca tetapi membuang satu langkah pada form. Tombol tutup tidak pernah ikut terfokus lebih dulu.
Catatan terakhir: —
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| v-model | boolean | false | Membuka dan menutup panel. |
| side | 'start' | 'end' | 'top' | 'bottom' | 'end' | Tepi tempat panel muncul. start dan end mengikuti arah tulisan, jadi tata letak kanan-ke-kiri ikut bercermin. |
| size | 'sm' | 'md' | 'lg' | 'full' | 'md' | Lebar untuk panel samping (18 / 24 / 32 rem), tinggi untuk panel atas dan bawah. Panel tidak pernah melebihi 92% layar. |
| title | string | — | Judul panel, sekaligus nama aksesibelnya. Tanpa judul, berikan aria-label sendiri. |
| description | string | — | Baris di bawah judul, terhubung lewat aria-describedby. |
| dismissible | boolean | true | Menampilkan tombol tutup dan mengizinkan Escape. Matikan hanya bila panel wajib diselesaikan. |
| label | string | — | Nama panel untuk pembaca layar, dipakai ketika slot header menggantikan header bawaannya. Tanpa ini, header yang diganti membuat dialognya tidak bernama. Diabaikan bila title diberikan. |
| closeOnBackdrop | boolean | true | Klik di luar panel menutupnya. |
| closeLabel | string | 'Tutup' | Nama tombol tutup. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| default | — | — | Isi panel. Bagian inilah yang digulir bila isinya panjang. |
| header | { close } | — | Mengganti seluruh header, termasuk tombol tutupnya. |
| title / description | — | — | Mengganti judul atau deskripsi tanpa menyentuh sisanya. |
| footer | { close } | — | Baris aksi yang menempel di bawah dan tidak ikut tergulir. close menutup panel. |
Event close dikirim setelah panel benar benar tertutup. Komponen juga mengekspos show() dan close() lewat template ref, dan meneruskan class ke panelnya — bukan ke kotak dialognya — sehingga tata letak isi bisa diatur dari halaman.
Drawer, Modal, dan CommandPalette memakai satu mekanisme yang sama: <dialog> bawaan lewat showModal(), jadi lapisan teratas, perangkap fokus, Escape, dan halaman yang menjadi inert datang dari browser — ditambah kunci gulir dan gerak keluar yang ditunggu sampai selesai.