Tabs 标签页

:::tip Tabs 组件需要配合 Tab 组件使用。 :::

示例

可选的 ui 尺寸属性值：s/m/l。

设置 ui 为 simple/strong 来分别启用简单样式、加强样式。

设置Tab 组件 to 属性来使用路由模式。

设置Tab 组件 disabled 属性来使选项卡处于禁用状态。

名称	类型	默认值	描述
`ui`	`string=`	-	[^ui]
`active`	`string`	-	[^active]
`matches`	`function(Route, Route): boolean`	`tabs.matches`	[^matches]
`addable`	`boolean`	`false`	是否可以增加标签。
`max`	`number`	-	可增加标签的上限值。
`tip`	`string`	-	提示文本。

^^^ui 预设样式。

+++枚举值

^^^active :::badges .sync :::

表示当前哪个标签页处于激活状态。具体映射的值受标签的属性影响，优先级 to > name。 ^^^

^^^matches 用于给内部的 Tab 组件设置统一的路由匹配逻辑。具体参见 Tab 组件的 to 属性。

:::warning 当内部的 Tab 组件设置了 matches 属性，将会覆盖在 Tabs 组件上的 matches 属性。 ::: ^^^

名称	描述
`default`	允许直接内联 `Tab` 组件。无默认内容。
`panel`	选项卡下方面板区域。
`extra`	位于标签页右侧的扩展区域。
`tab-item`	[^tab-item]
`tab-label`	标签选项卡文本区域，默认内容为选项卡文本。作用域参数同 `tab-item` 插槽，`attrs`/`activate` 除外。

^^^tab-item 标签选项卡区域，默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。

+++参数详情

名称	类型	描述
`label`	`string`	选项卡文本。
`name`	`string`	选项卡名称。
`disabled`	`boolean=`	选项卡是否禁用。
`to`	`string`	选项卡路由信息。
`active`	`boolean`	选项卡是否是激活项。
`index`	`number`	选项卡位于列表中的索引值。
`native`	`boolean`	路由模式是否强制使用原生的 `<a>` 元素。
`removable`	`boolean`	是否可删除。
`status`	`string`	选项卡状态。
`attrs`	`Object<string, string>`	其它需要输出到选项卡元素上的 HTML 属性，例如 `role`/`aria-selected`/`aria-controls` 等。
`activate`	`function(): void`	激活当前选项卡的方法。
+++
^^^

名称	描述
`change`	切换时触发。回调参数为 `(tab: Object)`，`tab` 与 `tab-label` 插槽中的作用域参数一致。
`add`	点击添加按钮触发的事件，无回调参数。
`remove`	删除标签时触发的事件。回调参数为 `(tab: Object)`，`tab` 与 `tab-label` 插槽中的作用域参数一致。

名称	类型	默认值	描述
`tabs.matches`	`function`	见描述。	[^config-matches]

^^^config-matches 函数签名与 Tab 组件的 to 属性相同。默认值为：

function (current, to) {
  return current.fullPath === to.fullPath
}

^^^