Tabs
Organizes content into separate panels that users can switch between. Makes navigating related sections quick and intuitive.
Orientation
Icons
Props
| Name | Default | Type |
|---|---|---|
as | - | string Element/component used to render the tab container |
tabs* | - | Tab[] List of tabs to render |
vertical | - | boolean Renders tabs vertically instead of horizontally |
modelValue | 0 | string | number |
Slots
| Slot | Payload |
|---|---|
tab-item | { tab: { label: string; icon?: string | undefined; route?: string | undefined; }; } Custom renderer for a tab trigger (icon + label / router-link). |
tab-panel | { tab: { label: string; icon?: string | undefined; route?: string | undefined; }; } Content rendered for each tab panel. |
Emit Events
| Event | Payload |
|---|---|
update:modelValue | [value: string | number] |