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

Tabs Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding value, name of the selected tabstringname 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

Event NameDescriptionParameters
tab-clicktriggers when a tab is clickedclicked tab
tab-removetriggers when tab-remove button is clickedname of the removed tab
tab-addtriggers when tab-add button is clicked
edittriggers when tab-add button or tab-remove is clicked(targetName, action)

Tabs Slots

NameDescriptionSubtags
-customize default contentTab-pane

Tab-pane Attributes

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

Tab-pane Slots

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