Tabs β Variants Showcase
Showcase variant + size dari components/ui/tabs.
1. Variant: pill (default)
Rounded-full container dengan sliding pill indicator.
Pill variant cocok untuk top-level filter β paling generic.
2. Variant: segmented
Squarer container dengan shadow + ring indicator. Cocok untuk tab toggle yang lebih solid.
All items.
3. Segmented + multi-line trigger (Rundown style)
Segmented dengan label dua baris untuk day picker. Override h-auto di trigger.
4. Segmented + icon-only trigger (BrandViewSwitcher style)
Icon-only dengan padding 0 + size-8 fixed.
Selected: grid
5. Variant: underline
Bottom underline indicator. Cocok untuk page-level tab nav.
Content panel untuk Tickets.
6. Sizes
Tiga ukuran: sm, md (default), lg.
7. Disabled trigger
Trigger disabled tidak bisa diaktifkan dan punya opacity 50%.
8. Many tabs (overflow scroll)
Underline variant dengan overflow-x-auto + scroll-fade-x + shrink-0 di trigger.
9. Swipe gesture
Set swipe agar tab bisa di-switch dengan swipe horizontal di area Tabs root. Default exclude: [role='tablist'], [aria-roledescription='carousel'], .pswp.
Tip: coba di mobile / touch device, atau drag horizontal di area konten panel di bawah ini.
Swipe kiri/kanan di area ini untuk pindah tab.
10. Controlled state (v-model)
Tab aktif dikontrol dari luar via v-model.
Active: Step 1