Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
基础用法
基础的、简洁的标签页。
卡片风格的标签
你可以设置具有卡片风格的标签。
带有边框的卡片风格
你还可以设置标签页为带有边框的卡片
标签位置的设置
可以通过 tab-position 设置标签的位置
自定义标签页的内容
可以通过具名插槽来实现自定义标签页的内容
动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用
添加按钮自定义图标
增加标签页触发器自定义
Tabs API
| 属性名 | 说明 | 类型 | Default |
|---|---|---|---|
| model-value / v-model | 绑定值，选中选项卡的 name，默认值是第一个 tab 的 name | string / number | — |
| type | 风格类型 | enum '' | 'card' | 'border-card' | '' |
| closable | 标签是否可关闭 | boolean | false |
Tabs Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| tab-click | tab 被选中时触发 | Function (pane: TabsPaneContext, ev: Event) => void |
| tab-change | activeName 改变时触发 | Function (name: TabPaneName) => void |
Tab-pane API
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 选项卡标题 | string | '' |
| disabled | 是否禁用 | boolean | false |
| closable | 标签是否可关闭 | boolean | false |
Tab-pane 插槽
| 插槽名 | 说明 |
|---|---|
| default | Tab-pane 的内容 |
| label | Tab-pane 的标题内容 |