Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能, 默认选中第一个标签页,你也可以通过 value 属性来指定当前选中的标签页。

User

卡片风格的标签

你可以设置具有卡片风格的标签。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

User

带有边框的卡片风格

你还可以设置标签页为带有边框的卡片

type 设置为 border-card

标签位置的设置

可以通过 tab-position 设置标签的位置

标签一共有四个方向的设置 tabPosition="left|right|top|bottom"

自定义标签页的内容

可以通过具名插槽来实现自定义标签页的内容

动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用

Tab 2 content

添加按钮自定义图标 2.4.0

Tab 2 content

增加标签页触发器自定义

Tab 2 content

Tabs API

Tabs 属性

属性名说明类型Default
model-value / v-model绑定值,选中选项卡的 name,默认值是第一个 tab 的 namestring / number
type风格类型enum''
closable标签是否可关闭booleanfalse
addable标签是否可增加booleanfalse
editable标签是否同时可增加和关闭booleanfalse
tab-position选项卡所在位置enumtop
stretch标签的宽度是否自撑开booleanfalse
before-leave切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换。Function() => true

Tabs 事件

事件名说明回调参数
tab-clicktab 被选中时触发Function
tab-changeactiveName 改变时触发Function
tab-remove点击 tab 移除按钮时触发Function
tab-add点击 tab 新增按钮时触发Function
edit点击 tab 的新增或移除按钮后触发Function

Tabs 插槽

插槽名说明子标签
default默认插槽Tab-pane
add-icon 2.5.4自定义添加按钮图标
addIcon 2.4.0 deprecated自定义添加按钮图标

Tab-pane API

Tab-pane 属性

属性名说明类型默认值
label选项卡标题string''
disabled是否禁用booleanfalse
name与选项卡绑定值 value 对应的标识符,表示选项卡别名。默认值是tab面板的序列号,如第一个 tab 是 0string / number
closable标签是否可关闭booleanfalse
lazy标签是否延迟渲染booleanfalse

Tab-pane 插槽

插槽名说明
defaultTab-pane 的内容
labelTab-pane 的标题内容

源代码

组件样式文档

贡献者