标签页 Tab

标签切换，切换不同的内容区域。

受控模式和非受控模式

通过 active 控制当前激活的标签页，支持 v-model（受控模式）。active 为 undefined 或者没有传入时，为非受控模式，此时可以通过 defaultActive 设置默认值。

Tab 1

Tab 2

Tab 3

Content of Tab 1

Content of Tab 2

Content of Tab 3

Active: 1

隐藏源代码

样式变体、位置 & 对齐

通过 variant 属性设置标签页的样式变体，支持 "line"（默认）和 "card" 两种样式。

通过 placement 属性设置标签页头的位置，支持 "top"（默认）、"bottom"、"left"、"right"。

通过 justify 属性设置标签页头的对齐方式，支持 "start"（默认）、"center"、"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

隐藏源代码

禁用

通过 TabPanel 的 disabled 属性禁用单个标签页，禁用的标签页不可点击切换，也不可关闭。

Tab 1

Disabled Tab

Tab 3

Content of Tab 1

This tab is disabled

Content of Tab 3

隐藏源代码

创建和关闭标签页

通过 creatable 属性开启新增标签页功能，点击新增按钮会触发 create 事件，配合 onCreate 回调实现新增逻辑。

通过 TabPanel 或 TabItem 上的 closable 属性开启标签页的关闭功能，点击关闭图标会触发 close 事件。

Tab 1

Tab 2

Tab 3

Content of Tab 1

Content of Tab 2

Content of Tab 3

隐藏源代码

图标

通过 TabPanel 的 icon 插槽为标签页添加图标。

Home

Settings

Messages

Home content

Settings content

Messages content

隐藏源代码

前缀与后缀

通过 prefix 和 suffix 插槽，在标签页头的前后添加自定义内容。

Tab A

Tab B

Tab C

Content A

Content B

Content C

隐藏源代码

仅展示标签头

使用 TabItem 作为子组件，仅展示标签页头，不包含内容面板。

Tab A

Tab B

Tab C

Disabled

隐藏源代码

API

TabProps

属性	类型	可选	默认值	描述	版本
active	number | string | symbol | null	是		当前激活的标签页索引，支持 v-model 受控模式。	0.2.0
defaultActive	number | string | symbol | null	是		当前激活的标签页索引的默认值，非受控模式。	0.2.0
variant	'line' | 'card'	是	'line'	标签页样式变体。	0.2.0
creatable	boolean	是	false	是否显示新增标签页按钮。	0.2.0
placement	'top' | 'bottom' | 'left' | 'right'	是	'top'	标签页头的位置。	0.2.0
justify	'start' | 'center' | 'end'	是	'start'	标签页头对齐方式。	0.2.0
tabMinWidth	number | string	是	60	标签页标题最小宽度，仅在 placement 为 left 或 right 时有效。	0.2.0
tabMaxWidth	number | string	是	160	标签页标题最大宽度，仅在 placement 为 left 或 right 时有效。	0.2.0
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.2.0

TabEvents

事件	参数	描述	版本
update:active	value: number | string | symbol	更新 active 的回调。	0.2.0
select	index: number | string | symbol, event: MouseEvent	选中标签页的回调。	0.2.0
close	index: number | string | symbol, event: MouseEvent	关闭标签页的回调。	0.2.0
create	event: MouseEvent	新增标签页的回调。	0.2.0

TabSlots

插槽	参数	描述	版本
default		标签页的子组件，可以是 TabPanel 或 TabItem。	0.2.0
prefix		标签页头前缀内容。	0.2.0
suffix		标签页头后缀内容。	0.2.0

TabPanelProps

属性	类型	可选	默认值	描述	版本
index	number | string | symbol	否		唯一标识，用于匹配激活的标签页。	0.2.0
title	string	是	''	标签页标题。	0.2.0
disabled	boolean	是	false	是否禁用。	0.2.0
closable	boolean	是	false	是否显示关闭图标。	0.2.0

TabPanelSlots

插槽	参数	描述	版本
default		标签页内容。	0.2.0
icon		标签页图标。	0.2.0

TabItemProps

属性	类型	可选	默认值	描述	版本
index	number | string | symbol	否		唯一标识。	0.2.0
title	string	是	''	标签页标题。	0.2.0
disabled	boolean	是	false	是否禁用。	0.2.0
closable	boolean	是	false	是否显示关闭图标。	0.2.0

TabItemSlots

插槽	参数	描述	版本
default		标签页标题内容。	0.2.0
icon		标签页图标。	0.2.0
title		标签页标题，优先级高于 title 属性。	0.2.0