Tabs
A tabs component that allows users to switch between different views or sections of content. It supports two styl
Props
Tabs Component
| Name | Default | Type |
|---|---|---|
variant | default | default filled The visual style of the tabs |
expand | false | boolean Whether the tabs should expand to full width |
disabled | false | boolean Whether all tabs are disabled |
Tab Component
| Name | Default | Type |
|---|---|---|
disabled | false | boolean Whether the tab is disabled |
value | — | string The value of the tab |
label | — | string The label text to display in the tab |
Events
| Name | Payload | Type |
|---|---|---|
update:modelValue | string | Emitted when the active tab changes |
Slots
Tabs Component
| Name | Accepts | Description |
|---|---|---|
default | any | Tab components |
start | any | Content to display before the tabs |
end | any | Content to display after the tabs |
Tab Component
| Name | Accepts | Description |
|---|---|---|
default | any | Custom content for the tab |
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-tabs-height | 40px | Tab bar height |
--vui-tabs-item-padding-inline | 10px | Tab item horizontal padding |
--vui-tabs-underline-color | var(--color-text) | Active tab underline color |
--vui-tabs-gap | 4px | Gap between tab items |
--vui-tabs-underline-size | 2px | Active tab underline thickness |
--vui-tabs-border-color | var(--color-border) | Tab bar bottom border color |