Tabs
Flexible tab navigation component with multiple visual styles (card, underline, segment, pills)
and two positions (top, left). Tabs are registered automatically through slots.
vue
<vs-tabs view="card" :position="'top'" @change="onTabChange">
<tab-item label="User">User content</tab-item>
<tab-item label="Config">Config content</tab-item>
<tab-item label="Role">Role content</tab-item>
<tab-item label="Task">Task content</tab-item>
</vs-tabs>User content
Config content
Role content
Task content
API
| Prop | Type | Default | Description |
|---|---|---|---|
view | 'card' | 'underline' | 'segment' | 'pills' | 'card' | Visual style of the tab buttons. |
position | 'top' | 'left' | 'top' | Position of the tab navigation. |
rounded | 'xs' | 'md' | 'lg' | 'md' | Border radius size of the tab buttons. |
size | 'xs' | 'md' | 'md' | Padding and font size of the tab buttons. |
color | string | undefined | Base color class applied to the tab buttons (e.g. 'blue', 'red'). |
Views
Defines the visual style of tabs — card for boxed panels, underline for a line under the active tab, segment for segmented control style, and pills for rounded pill-shaped tabs.
vue
<vs-tabs view="card"><!--- 'card' | 'underline' | 'segment' | 'pills' -->
<tab-item label="User">User content</tab-item>
<tab-item label="Config">Config content</tab-item>
<tab-item label="Role">Role content</tab-item>
<tab-item label="Task">Task content</tab-item>
</vs-tabs>User content
Config content
Role content
Task content
User content
Config content
Role content
Task content
User content
Config content
Role content
Task content
User content
Config content
Role content
Task content
Position left
vue
<vs-tabs view="segment" position="left">
<tab-item label="User">User content</tab-item>
<tab-item label="Config">Config content</tab-item>
<tab-item label="Role">Role content</tab-item>
<tab-item label="Task">Task content</tab-item>
</vs-tabs>User content
Config content
Role content
Task content
Color
vue
<vs-tabs view="card" color="red">
<tab-item label="User">User content</tab-item>
<tab-item label="Config">Config content</tab-item>
<tab-item label="Role">Role content</tab-item>
<tab-item label="Task">Task content</tab-item>
</vs-tabs>User content
Config content
Role content
Task content
User content
Config content
Role content
Task content
User content
Config content
Role content
Task content
User content
Config content
Role content
Task content
Size
vue
<vs-tabs view="card" size="md"> <!--- 'xs' | 'md' -->
<tab-item label="User">User content</tab-item>
<tab-item label="Config">Config content</tab-item>
<tab-item label="Role">Role content</tab-item>
<tab-item label="Task">Task content</tab-item>
</vs-tabs>User content
Config content
Role content
Task content
Rounded
vue
<vs-tabs view="card" rounded="xs"> <!--- 'xs' | 'md' | 'lg' -->
<tab-item label="User">User content</tab-item>
<tab-item label="Config">Config content</tab-item>
<tab-item label="Role">Role content</tab-item>
<tab-item label="Task">Task content</tab-item>
</vs-tabs>User content
Config content
Role content
Task content