Tabs
Divide data collections that are related but belong to different categories. YH-UI's Tabs combine the best features of Element Plus, Naive UI, and Ant Design, while introducing a unique Segment styler and custom transition hooks.
Basic Usage
Basic and concise tabs. Use v-model to bind the currently active tab name.
Custom Trigger
Specify the tab switching trigger via the trigger property. Options: click (default), hover.
Card Style
Set type="card" to change the look of the tabs to cards.
Bordered Card
Set type="border-card" for a bordered card presentation.
Segment Style
Set type="segment" for an iOS-style segment control effect, ideal for view switching.
Tab Position
Set the position of the tabs via tab-position. Options: top, right, bottom, left.
Custom Indicator Style
The default indicator is short (40px) and centered. Control its size via indicator-width and indicator-height. Set them to auto to make the indicator span the full tab width. Color can be customized via active-color and inactive-color.
Stretched Tabs
Set stretch to make the tabs fill the container width.
Dynamic Tabs
Set editable (equivalent to closable + addable) to allow dynamic addition and removal of tabs.
Custom Adder Trigger
Trigger tab addition via an external button instead of the built-in + button. Set :addable="false" to hide the built-in button and implement your own logic.
Before Change Hook
Control tab switching with the before-leave hook. Return false or a Promise.reject to prevent switching.
Lazy Render
Set lazy to delay rendering of tab content until the tab is first activated.
Usage in Nuxt
The component is fully adapted for Nuxt 3, supporting auto-import and SSR.
API
Tabs Props
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | Binding value, currently active tab name | string | number | '' |
| type | Tab style type | 'line' | 'card' | 'border-card' | 'segment' | 'line' |
| tab-position | Position of tabs | 'top' | 'right' | 'bottom' | 'left' | 'top' |
| closable | Whether tabs are closable | boolean | false |
| addable | Whether tabs can be added | boolean | false |
| editable | Whether tabs are editable (equivalent to closable + addable) | boolean | false |
| draggable | Whether tabs are draggable for reordering | boolean | false |
| before-leave | Hook before switch; return false to stop toggle | (newName, oldName) => boolean | Promise<boolean> | — |
| stretch | Whether tabs should span the full width | boolean | false |
| nav-class | Custom class name for the navigation bar | string | '' |
| content-class | Custom class name for the content area | string | '' |
| indicator-width | Indicator width (auto spans the full tab) | string | '' (CSS default 40px) |
| indicator-height | Indicator height (auto spans the full tab) | string | '' (CSS default 20px) |
| active-color | Color for the active state (text and indicator) | string | '' |
| inactive-color | Color for the inactive state | string | '' |
| trigger | Switch trigger | 'click' | 'hover' | 'click' |
Tabs Events
| Name | Description | Parameters |
|---|---|---|
| tab-click | Triggered when a tab is clicked | (pane: TabPaneConfig, ev: Event) => void |
| tab-change | Triggered when the active tab changes | (name: string | number) => void |
| tab-remove | Triggered when the close button is clicked | (name: string | number) => void |
| tab-add | Triggered when the add button is clicked | () => void |
| tab-drag-end | Triggered when drag-and-drop ends | (names: (string | number)[]) => void |
Tabs Slots
| Name | Description | Parameters |
|---|---|---|
| default | Content of TabPane | — |
| label | Custom tab label | { pane: TabPaneConfig } |
| add-icon | Custom icon for the add button | — |
Tabs Expose
You can access the Tabs instance via ref and call these methods:
| Name | Description | Type |
|---|---|---|
| addTab | Triggers the tab add event (use with @tab-add) | () => void |
| setActiveTab | Activates a specific tab | (name: string | number) => void |
| activeTab | Currently active tab name (reactive) | Ref<string | number> |
TabPane Props
| Name | Description | Type | Default |
|---|---|---|---|
| name | Unique identifier (Required) | string | number | — |
| label | Tab label/title | string | '' |
| disabled | Whether the tab is disabled | boolean | false |
| closable | Whether the tab is closable (overrides Tabs prop) | boolean | undefined |
| lazy | Whether to lazy-render the content | boolean | false |
| icon | Icon class name | string | '' |
TabPane Slots
| Name | Description | Parameters |
|---|---|---|
| default | Content of the tab | — |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-tabs-header-height | Navigation bar height | 40px |
--yh-tabs-active-color | Active state color | var(--yh-color-primary) |
--yh-tabs-text-color | Text color | var(--yh-text-color-primary) |
--yh-tabs-disabled-color | Disabled state color | var(--yh-text-color-disabled) |
--yh-tabs-border-color | Border color | var(--yh-border-color-light) |
--yh-tabs-indicator-width | Indicator width (horizontal layout) | 40px |
--yh-tabs-indicator-height | Indicator height (vertical layout) | 20px |