主题
Tabs 标签页
使用
import { KTabs, KTabPane } from "@ksware/ksw-ux";分隔内容上有关联但属于不同类别的数据集合。
基础用法
基础的、简洁的标签页。
Tabs 组件提供了选项卡功能， 默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。
卡片风格的标签
你可以设置具有卡片风格的标签。
只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。
带有边框的卡片风格
你还可以设置标签页为带有边框的卡片
将 type 设置为 border-card。
标签位置的设置
可以通过 tab-position 设置标签的位置
标签一共有四个方向的设置 tabPosition="left|right|top|bottom"
自定义标签页的内容
可以通过具名插槽来实现自定义标签页的内容
动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用
增加标签页触发器自定义
标签溢出
Tabs API
Tabs Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值，选中选项卡的 name，默认值是第一个tab的name | string | number | - |
| type | 风格类型 | enum | '' |
| closable | 标签是否可关闭 | boolean | false |
| addable | 是否可新增选项卡 | boolean | false |
| editable | 标签是否同时可增加和关闭 | boolean | false |
| tab-position | 选项卡所在位置 | enum | 'top' |
| stretch | 标签宽度是否自撑开 | boolean | false |
| maxWidth | tab-position为left或right时有效，设置选项卡的最大宽度 | string | number | - |
| before-leave | 切换标签之前的钩子函数，若返回false或者返回被reject的Promise，则阻止切换。 | Function | () => true |
| show-hide-list 1.1.18 | 是否显示隐藏的选项卡列表 | boolean | true |
Tabs Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| tab-click | 点击选项卡时触发 | Function |
| tab-change | activeName改变时触发 | Function |
| tab-remove | 点击tab移除按钮时触发 | Function |
| tab-add | 点击新增选项卡时触发 | Function |
| edit | 点击tab的新增或移除按钮后触发 | Function |
| tab-contextmenu 1.2.4 | 鼠标右键点击选项卡时触发 | Function |
Tabs Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 默认插槽内容 | - |
| add-icon | 自定义添加按钮图标 | - |
| extra | 自定义右侧额外内容 | - |
Tabs Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| currentName | 当前激活的选项卡 name | object |
| scrollToActiveTab 1.2.4 | 滚动到当前激活的选项卡 | Function |
TabPane API
TabPane Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| label | 选项卡标题 | string | '' |
| disabled | 是否禁用选项卡 | boolean | false |
| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | number | - |
| closable | 标签是否可关闭 | boolean | false |
| lazy | 标签是否延迟渲染 | boolean | false |
TabPane Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 选项卡内容 | - |
| label | 选项卡标题 | - |