Belum ada yang dibuka.
CommandPalette
Satu dialog untuk mencari halaman dan menjalankan tindakan, dibuka dengan ⌘K. Dipakai situs dokumentasi ini sendiri.
Dasar
Berikan daftar tujuan atau tindakan, lalu sediakan pemicunya lewat slot #trigger. Pencariannya mencocokkan nama, deskripsi, judul section, dan keywords yang tidak digambar — jadi istilah Inggris atau singkatan tetap menemukan barisnya.
Coba juga Command KCtrlK di halaman ini: pencarian dokumentasi di kanan atas adalah komponen ini.
Dikendalikan dari kode
v-model:open membukanya dari mana saja, misalnya dari tombol di toolbar atau setelah sebuah proses selesai. Setel shortcut="" bila aplikasi sudah memakai Command KCtrlK untuk hal lain.
open: false
Terakhir dipilih: —
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| items | W4cCommandPaletteItem[] | [] | Daftar tujuan atau tindakan. Urutannya dipertahankan, dan item berurutan dengan group yang sama menjadi satu section. |
| v-model:open | boolean | false | Membuka dan menutup dari kode. Tanpa ini, palette dibuka lewat slot trigger atau pintasan. |
| shortcut | string | 'mod+k' | Pintasan global yang membukanya dari mana saja. mod berarti ⌘ di Apple dan Ctrl di tempat lain; string kosong mematikan pintasannya. |
| placeholder | string | 'Cari…' | Placeholder kolom pencarian. |
| label | string | 'Pencarian' | Nama aksesibel dialog sekaligus kolom pencariannya. |
| max | number | 10 | Jumlah baris terbanyak yang digambar sekaligus. Sisanya menunggu pencarian yang lebih sempit. |
| hints | boolean | true | Baris keterangan tombol di bagian bawah, disembunyikan di layar sempit karena di sana tidak ada papan ketik. |
| emptyTitle / emptyDescription | string | 'Tidak ada hasil' / 'Coba kata kunci lain.' | Teks saat pencarian tidak menemukan apa pun. |
| closeLabel | string | 'Tutup pencarian' | Nama tombol tutup di ujung kolom pencarian. |
| icon | string | 'lucide:file-text' | Ikon untuk baris yang tidak punya ikon sendiri. |
W4cCommandPaletteItem
| Field | Tipe | Default | Keterangan |
|---|---|---|---|
| label | string | — | Nama baris, satu baris teks. |
| description | string | — | Baris kedua: ke mana baris ini menuju atau apa yang dilakukannya. |
| icon | string | — | Nama ikon Iconify di dalam kotak di kiri baris. |
| to | RouteLocationRaw | — | Tujuan navigasi. Baris dengan to dirender sebagai tautan sungguhan, jadi klik tengah dan “buka di tab baru” tetap bekerja. |
| keywords | string[] | — | Kata lain yang ikut dicari tetapi tidak digambar — sinonim, istilah Inggris, atau singkatan. |
| group | string | — | Judul section baris ini, sekaligus keterangan kecil di ujung kanannya. |
| disabled | boolean | false | Baris tetap terlihat tetapi dilewati panah dan tidak bisa dipilih. |
| onSelect | () => void | — | Dijalankan saat baris dipilih, untuk tindakan tanpa navigasi. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| trigger | { open, shortcut } | — | Kontrol yang membukanya. Tanpa slot ini tidak ada apa pun yang digambar sampai palette dibuka dari kode atau pintasan. |
| item | { item, active, index } | — | Mengganti isi satu baris; pembungkus barisnya tetap milik komponen. |
| empty | { query } | — | Mengganti tampilan hasil kosong. |
| footer | — | — | Mengganti baris keterangan tombol di bawah. |
Event select membawa item yang dipilih. Komponen juga mengekspos open() dan close() lewat template ref.