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 trigger button of new tab

Tabs Attributes

NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value, name of the selected tabstring / numbername of first tab
typetype of Tabstringcard/border-card
closablewhether Tab is closablebooleanfalse
addablewhether Tab is addablebooleanfalse
editablewhether Tab is addable and closablebooleanfalse
tab-positionposition of tabsstringtop/right/bottom/lefttop
stretchwhether width of tab automatically fits its containerboolean-false
before-leavehook function before switching tab. If false is returned or a Promise is returned and then is rejected, switching will be preventedFunction(activeName, oldActiveName)

Tabs Events

tab-clicktriggers when a tab is clicked(pane: TabsPaneContext, ev: Event)
tab-changetriggers when activeName is changed(name: TabPanelName)
tab-removetriggers when tab-remove button is clicked(name: TabPanelName)
tab-addtriggers when tab-add button is clicked
edittriggers when tab-add button or tab-remove is clicked(paneName: TabPanelName | undefined, action: 'remove' | 'add')

Tabs Slots

-customize default contentTab-pane

Tab-pane Attributes

NameDescriptionTypeAccepted ValuesDefault
labeltitle of the tabstring
disabledwhether Tab is disabledbooleanfalse
nameidentifier corresponding to the name of Tabs, representing the alias of the tab-panestring / numberordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0'
closablewhether Tab is closablebooleanfalse
lazywhether Tab is lazily renderedbooleanfalse

Tab-pane Slots

-Tab-pane's content
labelTab-pane's label