Skip to content

Tabs 选项卡

选项卡组件,分隔内容上有关联但属于不同类别的数据集合,用于在多个内容区域之间切换。

TIP

Tabs 组件对应 GvTabs。下方示例可直接交互,点击「显示代码」查看源码。

基础用法

基础的、简洁的标签页。

GvTabs 组件提供了选项卡功能, 默认选中第一个标签页,也可以通过 value 属性来指定当前选中的标签页。

卡片风格的标签

卡片选项卡用于展示多个选项卡,每个选项卡都有一个标题和一个内容区域。

带有边框的卡片风格的标签

边框卡片选项卡用于展示多个选项卡,每个选项卡都有一个标题和一个内容区域。

标签位置

可以通过 tab-position 设置标签的位置

标签一共有四个方向的设置 tabPosition="left|right|top|bottom", 默认是 left

动态增减标签页​

增减标签页按钮只能在选项卡样式的标签页下使用。

API

Attributes

属性名说明类型默认值
tabPosition设置tab的位置属性stringleft
type设置tabs的type属性string-
closable设置是否可关闭booleanfalse

Events

事件名说明类型
tab-click点击tab页响应方法(pane: TabsPaneContext, ev: Event) => void
edit点击 tab 的新增或移除按钮后触发(paneName: TabPaneName | undefined, action: 'remove' | 'add') => void

Exposes