PT Hijau Lestari
Pelanggan aktif dengan empat lokasi pengangkutan.
Tabs
Sekelompok panel setara yang dapat dipindahkan tanpa meninggalkan konteks halaman.
Dasar
Berikan daftar item, lalu gunakan slot #panel-[value] untuk isi panel yang kompleks. Tab pertama yang aktif akan dipilih otomatis bila v-model belum diberikan.
Penanda tab aktif adalah satu elemen yang bergeser ke tab baru (250 ms), bukan garis yang langsung berpindah, dan panelnya masuk dari arah perpindahan. Gerakan itu menunjukkan ke mana pilihan tadi pergi. Keduanya mati sendiri saat sistem meminta prefers-reduced-motion.
Variant
underline cocok untuk bagian utama halaman, pill untuk pilihan ringkas, dan bordered untuk tab yang perlu batas lebih tegas.
underline
pill
bordered
Lebar penuh
full-width membuat tab berbagi lebar wadahnya secara merata, bukan mengikuti panjang labelnya. Berguna untuk bilah pilihan di layar sempit, tempat tab yang mengecil di kanan terasa seperti kesalahan.
Penanda aktifnya diukur dari tab yang ditempatinya, jadi ia tetap sejajar pada pembagian lebar yang berakhir di pecahan piksel — termasuk pada tab terakhir, tempat galat pembulatan biasanya menumpuk.
437px
302px
100%
Vertikal dan disabled
Orientasi vertikal memakai tombol panah atas dan bawah. Item disabled tetap terlihat, tetapi dilewati oleh navigasi keyboard dan tidak dapat dipilih.
Banyak tab
Daftar horizontal menggulir di dalam wadahnya ketika label tidak muat. Tab yang menerima fokus digulir ke area terlihat tanpa membuat halaman melebar.
Bilah tab dengan isi sendiri
Slot #actions mengisi ujung baris tab — catatan, filter, atau tombol — di luar tablist, yang menurut WAI-ARIA hanya boleh memuat tab. Isinya tidak ikut menggulir saat tabnya banyak. Bersama listClass, panelClass, dan :panel-padding="false", itulah yang membentuk bilah Preview/Code pada setiap contoh di situs ini: pratinjau yang sedang kamu baca memakai komponen ini sendiri.
Aktivasi keyboard
Mode bawaan automatic langsung mengganti panel saat tombol panah memindahkan fokus. Gunakan activation="manual" bila isi panel perlu dimuat dari server; fokus dapat bergerak lebih dulu dan panel baru dibuka dengan Enter atau Spasi.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| items | W4cTabItem[] | [] | Daftar tab dan isi panelnya. |
| modelValue | string | number | undefined | Nilai tab aktif, mendukung v-model. |
| defaultValue | string | number | tab aktif pertama | Tab awal untuk penggunaan tanpa v-model. |
| variant | 'underline' | 'pill' | 'bordered' | 'underline' | Gaya visual daftar tab. |
| size | 'sm' | 'md' | 'lg' | 'md' | Ukuran label, ikon, badge, dan panel. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Arah daftar tab dan tombol panah keyboard. |
| activation | 'automatic' | 'manual' | 'automatic' | Automatic langsung memilih saat fokus berpindah; manual menunggu Enter atau Spasi. |
| loop | boolean | true | Mengulang navigasi keyboard dari ujung ke awal. |
| fullWidth | boolean | false | Membagi lebar tab horizontal secara merata. |
| lazy | boolean | false | Hanya memasang panel aktif; state panel lama dibuang ketika berpindah. |
| label | string | 'Tab' | Nama aksesibel tablist. |
| listClass | string | — | Kelas tambahan untuk baris yang memuat tab dan slot actions — untuk bilah tab yang perlu latar atau garisnya sendiri. |
| panelClass | string | — | Kelas tambahan untuk kotak tempat panel berada. |
| panelPadding | boolean | true | Jarak antara tab dan panelnya. Matikan bila panelnya membawa padding sendiri, alih-alih menimpanya dengan utility lain yang urutannya ditentukan CSS. |
W4cTabItem
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | number | wajib | Nilai unik tab. |
| label | string | wajib | Teks label tab. |
| content | string | undefined | Isi teks bawaan panel saat tidak memakai slot. |
| icon | string | undefined | Nama ikon Iconify dekoratif sebelum label. |
| badge | string | number | undefined | Hitungan atau status singkat setelah label. |
| disabled | boolean | false | Menampilkan tab tetapi melewatinya saat navigasi. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| actions | { active } | — | Ruang di ujung baris tab, di luar tablist: catatan, filter, atau tombol. Tidak ikut menggulir bersama tabnya. |
| tab | { item, active, focused } | — | Mengganti tampilan label semua tab. |
| tab-[value] | { item, active, focused } | — | Mengganti label satu tab. |
| panel | { item, active } | — | Mengganti isi semua panel. |
| panel-[value] | { item, active } | — | Mengganti isi panel tertentu. |
Events
| Event | Tipe | Default | Keterangan |
|---|---|---|---|
| update:modelValue | (value: string | number) => void | — | Dipicu untuk sinkronisasi v-model. |
| change | (value: string | number) => void | — | Dipicu ketika tab aktif berubah. |