Tabs

Divide data collections which are related yet belong to different types.

Basic usage

Basic and concise tabs.

Tabs styled as cards.

Border card tabs.

You can use tab-position attribute to set the tab's position.

You can use named slot to customize the tab label content.

Only card type Tabs support addable & closeable.

Name	Description	Type	Default
model-value / v-model	binding value, name of the selected tab, the default value is the name of first tab	`string` / `number`	—
type	type of Tab	`enum`	''
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	`enum`	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`	() => true

Name	Description	Parameters
tab-click	triggers when a tab is clicked	`Function`
tab-change	triggers when `activeName` is changed	`Function`
tab-remove	triggers when tab-remove button is clicked	`Function`
tab-add	triggers when tab-add button is clicked	`Function`
edit	triggers when tab-add button or tab-remove is clicked	`Function`

Name	Description	Type	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, the default is ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0'	`string` / `number`	—
closable	whether Tab is closable	`boolean`	false
lazy	whether Tab is lazily rendered	`boolean`	false