Theme:
Ui3nTabs
Tabs component for organizing content into tabbed sections.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
modelValue* | number | 0 | Current active tab index |
itemDirection | "horizontal" | "vertical" | undefined | "horizontal" | Direction of tabs |
activeColor | string | undefined | "var(--color-text-control-accent-default)" | Active tab color |
inactiveColor | string | undefined | "var(--color-text-control-primary-default)" | Inactive tab color |
indicatorColor | string | undefined | "var(--color-border-control-accent-default)" | Indicator color |
indicatorSize | string | number | undefined | 2 | Indicator size |
indicatorPosition | "reverse" | "normal" | undefined | "normal" | Indicator position |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
update:modelValue | val: number | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#default | — | Default slot |
Usage Examples
Simple tabs
Simple tabs
Basic horizontal tabs
Vertical tabs
Vertical tabs
Tabs with vertical direction
Customized tabs
Customized tabs
Tabs with custom colors and indicator