Tabs 标签页

用于分隔和切换同一层级的内容区域。Tabs 适合在有限空间内承载多组内容，通过点击不同标签页进行切换。

基础用法

最常见的用法，通过 v-model 绑定当前激活的标签名，并使用 c-tab-pane 作为子项。

---

风格类型

通过 type 属性切换不同的样式风格，支持 line（默认）、slider 和 card 三种类型。

Slider 风格

Card 风格

Line 风格（带指示条）

提示：可通过 show-indicator 属性控制是否显示底部主题色指示条。

---

标签位置

使用 tab-position 设置标签页位置，支持 top、right、bottom、left 四个方向。

提示：纵向标签页（left/right）完全支持所有风格类型（line、slider、card）。

---

等宽拉伸

使用 stretch 属性让标签均分宽度，适合移动端或需要等宽显示的场景。

---

可编辑标签

开启 editable 和 closable 支持动态新增和删除标签。

---

受控切换

通过 before-leave 钩子函数可以在切换前进行拦截。

---

自定义标签内容

使用 #label 插槽可以自定义标签内容，支持图标、徽章等。

---

API

CTabs Props

属性名	说明	类型	可选值	默认值
modelValue	当前激活的标签名	string | number	—	第一个 pane 的 name
type	标签样式类型	'line' | 'slider' | 'card'	line / slider / card	line
tabPosition	标签位置	'top' | 'right' | 'bottom' | 'left'	top / right / bottom / left	top
showIndicator	是否显示底部指示条（仅 line 风格）	boolean	—	true
stretch	标签等宽拉伸	boolean	—	false
editable	是否可新增标签	boolean	—	false
closable	是否显示关闭按钮	boolean	—	false
beforeLeave	切换前钩子，返回 boolean | Promise<boolean>	(newName, oldName) => boolean | Promise<boolean>	—	—

CTabs Events

事件名	说明	回调参数
update:modelValue	激活标签改变	(name: string | number) => void
tab-click	点击标签时触发	(pane: { name: string | number, label: string }) => void
tab-add	点击新增按钮触发	() => void
tab-remove	点击关闭按钮触发	(name: string | number) => void

CTabs Slots

插槽名	说明
默认	放置多个 c-tab-pane

CTabPane Props

属性名	说明	类型	默认值
label	标签文本	string	—
name	标签唯一标识（必填）	string | number	—
disabled	是否禁用	boolean	false
closable	是否显示关闭按钮（覆盖 c-tabs 的 closable）	boolean	undefined

CTabPane Slots

插槽名	说明
默认	标签页内容
label	自定义标签内容