Appearance
Tabs
STabs is a set of tabs built on Reka UI (the tablist/tab/tabpanel roles, arrow-key navigation). Tabs are set with the items prop, and the content of each goes into the slot of the same name (#<value>). It works with v-model (the active tab).
Basic usage
Vertical
Tab icons
The icon field of a tab draws a leading icon (a registry name or a raw path).
Color
The color prop sets the color of the active tab and the indicator from the palette.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
color | string | undefined | Color of the active tab/indicator: a name from the palette
(primary/teal/teal-10). |
items | {
value: string;
label: string;
icon?: string;
disabled?: boolean
}[] | undefined | List of tabs. Each tab content goes into the slot of the same name (#<value>). |
orientation | "vertical" | "horizontal" | "horizontal" | Orientation: horizontal (default) or vertical. |
aria-label | string | undefined | Accessible name of the tab list. |
model-value | string | undefined | Value of the active tab. Two-way binding via v-model. |
Events
| Name | Signature | Description |
|---|---|---|
update:modelValue | (value: string | undefined) => void | Emitted when modelValue changes. Used for two-way binding (v-model). |