🌏 Translated with the assistance of DeepSeek and ChatGPT

Tab

Switch between different content areas via tabs.

Controlled & Uncontrolled

Use active to control the currently active tab, which supports v-model (controlled mode). When active is undefined or not passed, it operates in uncontrolled mode, and the default value can be set via defaultActive.

Tab 1

Tab 2

Tab 3

Content of Tab 1

Content of Tab 2

Content of Tab 3

Active: 1

Hide source code

Variant, Placement & Justify

Use the variant prop to set the tab style, supporting "line" (default) and "card".

Use the placement prop to set the tab header position, supporting "top" (default), "bottom", "left", and "right".

Use the justify prop to set the tab header alignment, supporting "start" (default), "center", and "end".

Variant:

Line

Card

Placement:

Top

Bottom

Left

Right

Justify:

Start

Center

End

Tab A

Tab B

Tab C

Content of Tab A

Content of Tab B

Content of Tab C

Hide source code

Disabled

Disable individual tabs via the disabled prop on TabPanel. Disabled tabs cannot be clicked to switch or closed.

Tab 1

Disabled Tab

Tab 3

Content of Tab 1

This tab is disabled

Content of Tab 3

Hide source code

Create & Close Tabs

Enable the create tab functionality via the creatable prop. Clicking the add button triggers the create event. Use the onCreate callback to implement the creation logic.

Enable the close functionality on tabs via the closable prop on TabPanel or TabItem. Clicking the close icon triggers the close event.

Tab 1

Tab 2

Tab 3

Content of Tab 1

Content of Tab 2

Content of Tab 3

Hide source code

Icon

Use the icon slot on TabPanel to add icons to tabs.

Home

Settings

Messages

Home content

Settings content

Messages content

Hide source code

Prefix & Suffix

Use the prefix and suffix slots to add custom content before and after the tab header.

Tab A

Tab B

Tab C

Content A

Content B

Content C

Hide source code

Header Only

Use TabItem as children to render only the tab headers without content panels.

Tab A

Tab B

Tab C

Disabled

Hide source code

API

TabProps

Attribute	Type	Optional	Default	Description	Version
active	number | string | symbol | null	True		The index of the currently active tab. Supports controlled mode via v-model.	0.2.0
defaultActive	number | string | symbol | null	True		Default value for the active tab index in uncontrolled mode.	0.2.0
variant	'line' | 'card'	True	'line'	Tab style variant.	0.2.0
creatable	boolean	True	false	Whether to show the add tab button.	0.2.0
placement	'top' | 'bottom' | 'left' | 'right'	True	'top'	Tab header position.	0.2.0
justify	'start' | 'center' | 'end'	True	'start'	Tab header alignment.	0.2.0
tabMinWidth	number | string	True	60	Minimum width of the tab title. Only effective when placement is left or right.	0.2.0
tabMaxWidth	number | string	True	160	Maximum width of the tab title. Only effective when placement is left or right.	0.2.0
pollSizeChange	boolean	True	false	Enable polling for component size changes, which may affect performance.	0.2.0

TabEvents

Event	Parameter	Description	Version
update:active	value: number | string | symbol	Callback when active updates.	0.2.0
select	index: number | string | symbol, event: MouseEvent	Callback when a tab is selected.	0.2.0
close	index: number | string | symbol, event: MouseEvent	Callback when a tab is closed.	0.2.0
create	event: MouseEvent	Callback when a tab is created.	0.2.0

TabSlots

Slot	Parameter	Description	Version
default		Child components of the tab, which can be TabPanel or TabItem.	0.2.0
prefix		Content to display before the tab header.	0.2.0
suffix		Content to display after the tab header.	0.2.0

TabPanelProps

Attribute	Type	Optional	Default	Description	Version
index	number | string | symbol	False		Unique identifier used to match the active tab.	0.2.0
title	string	True	''	Tab title.	0.2.0
disabled	boolean	True	false	Whether the tab is disabled.	0.2.0
closable	boolean	True	false	Whether to show the close icon.	0.2.0

TabPanelSlots

Slot	Parameter	Description	Version
default		Tab content.	0.2.0
icon		Tab icon.	0.2.0

TabItemProps

Attribute	Type	Optional	Default	Description	Version
index	number | string | symbol	False		Unique identifier.	0.2.0
title	string	True	''	Tab title.	0.2.0
disabled	boolean	True	false	Whether the tab is disabled.	0.2.0
closable	boolean	True	false	Whether to show the close icon.	0.2.0

TabItemSlots

Slot	Parameter	Description	Version
default		Tab title content.	0.2.0
icon		Tab icon.	0.2.0