Tabs 选项卡
选项卡组件,分隔内容上有关联但属于不同类别的数据集合,用于在多个内容区域之间切换。
TIP
Tabs 组件对应 GvTabs。下方示例可直接交互,点击「显示代码」查看源码。
基础用法
基础的、简洁的标签页。
GvTabs 组件提供了选项卡功能, 默认选中第一个标签页,也可以通过 value 属性来指定当前选中的标签页。
卡片风格的标签
卡片选项卡用于展示多个选项卡,每个选项卡都有一个标题和一个内容区域。
带有边框的卡片风格的标签
边框卡片选项卡用于展示多个选项卡,每个选项卡都有一个标题和一个内容区域。
标签位置
可以通过 tab-position 设置标签的位置
标签一共有四个方向的设置 tabPosition="left|right|top|bottom", 默认是 left。
动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用。
API
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tabPosition | 设置tab的位置属性 | string | left |
| type | 设置tabs的type属性 | string | - |
| closable | 设置是否可关闭 | boolean | false |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| tab-click | 点击tab页响应方法 | (pane: TabsPaneContext, ev: Event) => void |
| edit | 点击 tab 的新增或移除按钮后触发 | (paneName: TabPaneName | undefined, action: 'remove' | 'add') => void |
Exposes
无