Components
Tabs
Switch between panels of related content. Only TabComponent takes v-model; triggers and panels just need a value.
import { TabComponent, TabListComponent, TabTriggerComponent, TabContentComponent } from '@/MigsLab/shared'
Example
Make changes to your account here.
const activeTab = ref('account')
<TabComponent v-model="activeTab">
<TabListComponent>
<TabTriggerComponent value="account">Account</TabTriggerComponent>
<TabTriggerComponent value="password">Password</TabTriggerComponent>
</TabListComponent>
<TabContentComponent value="account">...</TabContentComponent>
<TabContentComponent value="password">...</TabContentComponent>
</TabComponent>API
TabComponent props
| Name | Type | Default | Description |
|---|---|---|---|
v-model | string | — | Value of the active tab. Required. |
TabTriggerComponent props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Tab this trigger activates. |
disabled | boolean | false | Prevent selecting the tab. |
TabContentComponent props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | Panel is shown while this value is active. |