Tabs
Basic usage:
label 1
label 2
label 3
label 4
label 5
Tab Content 1
Stretch:
label 1
label 2
label 3
label 4
label 5
Tab Content 1
Navigation Card Type:
label 1
label 2
label 3
label 4
label 5
Tab Content 1
Editable tabs with lazy option:
label 1
label 2
label 3
label 4
Tab Content 1
Props:
Props of VcTabs
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| modelValue | Value of the active tab. Use attribute name of TabPane | String | --- | --- |
| stretch | Whether width of tab automatically fits its container | Boolean | true | false | false |
| nav-type | Type of Navigation | String | default | card | default |
Props of VcTabPane
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| label | Label of navigation | String | --- | --- |
| index | Index of tab. (should be used if you want to keep order tabs after updating) | number | --- | --- |
| name | Name of tab pane. Required! | String | --- | --- |
| icon | Icon of tab pane | String | --- | --- |
| closable | Show close icon | Boolean | true | false | false |
| disabled | Whether Tab is disabled | Boolean | true | false | false |
| lazy | Whether Tab is lazily rendered | Boolean | true | false | false |
| tab-data | Additional data for tab | Object | --- | {} |
| nav-class | Additional class for tab item navigation | string | --- |
Props of VcTabNav
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| tab-items | Array with tab items. { paneName: string, active: boolean, index?: number, label: string, disabled: boolean, isClosable: boolean icon?: string, props?: any, slots?: any, tabData?: any navClass?: string }[]. Whether navigation is used without pane, disabled and closable props should add into props (optional) | Array | VcPaneType[] | [] |
| stretch | Whether width of tab automatically fits its container | Boolean | true | false | false |
Slots:
VcTabs Slots
| Name | Description |
|---|---|
| default | Default slot. Use VcTabPane component |
VcTabPane Slots
| Name | Description |
|---|---|
| default | Default slot. Content tab |
| tab-name | Tab-pane's content by tab name |
| label | Tab-pane's label (navigation tab label) |
VcTabNav Slots
| Name | Description |
|---|---|
| tabs-nav-item | Tab label |
Events:
Events of VcTabs
| Method | Description | Parameters |
|---|---|---|
| update:modelValue | triggers when activeName is changed | tabName |
| tab-change | triggers when activeName is changed | tabName |
| tab-remove | triggers when tab-remove button is clicked | tabName, tabData |
| tab-click | triggers when a tab is clicked | tabId, tabData |
Events of VcTabNav
| Method | Description | Parameters |
|---|---|---|
| tab-close | triggers when a tab-remove is clicked | tabData, index |
| tab-click | triggers when a tab is clicked | tabUid |