Tabs
Divide data collections which are related yet belong to different types.
Basic usage
Basic and concise tabs.
Card Style
Tabs styled as cards.
Border card
Border card tabs.
Tab position
You can use tab-position attribute to set the tab's position.
Custom Tab
You can use named slot to customize the tab label content.
Add & close tab
Only card type Tabs support addable & closeable.
Customized add button icon 2.4.0
Customized trigger button of new tab
Tabs Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | binding value, name of the selected tab | string / number | — | name of first tab |
| type | type of Tab | string | card/border-card | — |
| closable | whether Tab is closable | boolean | — | false |
| addable | whether Tab is addable | boolean | — | false |
| editable | whether Tab is addable and closable | boolean | — | false |
| tab-position | position of tabs | string | top/right/bottom/left | top |
| stretch | whether width of tab automatically fits its container | boolean | - | false |
| before-leave | hook function before switching tab. If false is returned or a Promise is returned and then is rejected, switching will be prevented | Function(activeName, oldActiveName) | — | — |
Tabs Events
| Name | Description | Parameters |
|---|---|---|
| tab-click | triggers when a tab is clicked | (pane: TabsPaneContext, ev: Event) |
| tab-change | triggers when activeName is changed | (name: TabPaneName) |
| tab-remove | triggers when tab-remove button is clicked | (name: TabPaneName) |
| tab-add | triggers when tab-add button is clicked | — |
| edit | triggers when tab-add button or tab-remove is clicked | (paneName: TabPaneName | undefined, action: 'remove' | 'add') |
Tabs Slots
| Name | Description | Subtags |
|---|---|---|
| - | customize default content | Tab-pane |
| addIcon 2.4.0 | customize add button icon | - |
Tab-pane Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| label | title of the tab | string | — | — |
| disabled | whether Tab is disabled | boolean | — | false |
| name | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string / number | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0' |
| closable | whether Tab is closable | boolean | — | false |
| lazy | whether Tab is lazily rendered | boolean | — | false |
Tab-pane Slots
| Name | Description |
|---|---|
| - | Tab-pane's content |
| label | Tab-pane's label |