Skip to content

Tabs 标签页

标签页组件允许用户在不同的视图之间切换,每个标签页包含其独特的内容。这是一种常见的导航模式,用于组织和访问分层的内容结构。

基础用法

基础的标签页用法。会触发 tab-click 事件。

用户管理
配置管理
角色管理

标签位置

通过 position 设置标签的位置,可选值为 toprightbottomleft

用户管理
配置管理
角色管理

卡片风格

将 type 设置为 card 可以展示卡片风格的标签页。

用户管理
配置管理
角色管理

可编辑标签

设置 editable 属性后可以对标签进行删除操作。删除标签时会触发 tab-remove 事件。

用户管理内容
配置管理内容
角色管理内容

属性

参数说明类型可选值默认值
value当前激活 tab 面板的 namestring / number
type标签风格stringcard / lineline
position标签位置stringtop / right / bottom / lefttop
editable是否可编辑标签页booleanfalse

事件

事件名说明回调参数
tab-click点击 tab 时触发当前激活 tab 面板的 name
tab-remove点击 tab 关闭按钮时触发当前关闭 tab 面板的 name