UI Library
Tabs
Tabbed navigation and content switching.
Basic
The `v-tabs` component is used for hiding content behind a selectable item.
Menyimpan ringkasan utama dari tab yang sedang aktif.
Stacked
Using `stacked` prop you can have buttons that use both icons and text.
Tab vertikal kecil untuk profil dan preferensi dasar.
Vertical
The `vertical` prop allows for `v-tab` components to stack vertically.
Ringkasan vertikal untuk konten yang sedang dipilih.
Alignment
Use `align-tabs` prop to change the tabs alignment.
Pagination
If the tab items overflow their container, pagination controls will appear on desktop.
Pagination keeps long tab bars usable when the row exceeds the available width.
Custom Icons
`prev-icon` and `next-icon` props can be used for applying custom pagination icons.
Icon pagination keeps the controls compact while the tab row remains scrollable.
Fixed
The `fixed-tabs` prop forces `v-tab` to take up all available space up to the maximum width (300px).
Grow
The `grow` prop will make the tab items take up all available space with no limit.
Programmatic Navigation
Programmatic navigation keeps the view and actions in sync.
Selected tab and controls stay in sync when navigating programmatically.
Dynamic
Tabs can be dynamically added and removed. This allows you to update to any number and the `v-tabs` component will react.
The active tab clamps to the last available item when the list becomes shorter.
Basic Pill
Use our custom class `.v-tabs-pill` along with `v-tabs` component to style pill tabs.
Pill tabs soften the shape while keeping the hierarchy clear.
Vertical Pill
Use our custom class `.v-tabs-pill` along with `v-tabs` component to style pill tabs.
Vertical pill tabs keep the stacked rhythm.