- Tabs 标签页
- 基础用法
- 选项卡样式
- 可关闭
- 卡片化
- 自定义标签页
- 动态增减标签页
- 动态添加标签页
- Tabs Attributes
- Tabs Events
- Tabs.Pane Attributes
Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
基础用法
基础的、简洁的标签页。
选项卡样式
选项卡样式的标签页。
可关闭
可以关闭标签页。
卡片化
卡片化的标签页。
自定义标签页
可以通过 node 类型来实现自定义标签页的内容。
动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用
动态添加标签页
Tabs Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 风格类型 | string | card, border-card | — |
closable | 标签是否可关闭 | boolean | - | false |
addable | 标签是否可增加 | boolean | - | false |
editable | 标签是否同时可增加和关闭 | boolean | - | false |
activeName | 选中选项卡的 name | string | — | 第一个选项卡的 name |
value | 绑定值,选中选项卡的name | string | — | 第一个选项卡的 name |
Tabs Events
事件名称 | 说明 | 回调参数 |
---|---|---|
onTabClick | tab 被选中时触发 | 被选中的标签 tab 实例 |
onTabRemove | 点击 tab 移除按钮后触发 | 被删除的标签的 name |
onTabAdd | 点击 tabs 的新增按钮后触发 | - |
onTabEdit | 点击 tabs 的新增按钮或 tab 被关闭后触发 | (targetName, action) |
Tabs.Pane Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 选项卡标题 | string,node | — | — |
disabled | 是否禁用 | boolean | — | false |
name | 与选项卡 activeName 对应的标识符,表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1' |
closable | 标签是否可关闭 | boolean | — | false |