## Tabs 标签页分隔内容上有关联但属于不同类别的数据集合。 ### 基础用法基础的、简洁的标签页。 :::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。 ```html ``` ::: ### 选项卡样式选项卡样式的标签页。 :::demo 只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。 ```html ``` ::: ### 可关闭可以关闭标签页。 :::demo 通过设置 `closable` 属性来打开 `Tabs` 的可关闭标签效果, `closable` 也可以设置在 `Tab Panel` 中实现部分标签页的可关闭效果。 ```html ``` ::: ### 卡片化卡片化的标签页。 :::demo 将`type`设置为`border-card`。 ```html

用户管理

配置管理

角色管理

定时任务补偿

``` ::: ### 自定义标签页可以通过具名 `slot` 来实现自定义标签页的内容 :::demo ```html

我的行程我的行程

消息中心

角色管理

定时任务补偿

``` ::: ### 动态增加标签页展示如何通过触发器来动态增加标签页 :::demo ```html

add tab

``` ::: ### Tabs Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | type | 风格类型 | string | card/border-card | — | | closable | 标签是否可关闭 | boolean | — | false | | active-name(deprecated) | 选中选项卡的 name | string | — | 第一个选项卡的 name | | value | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name | ### Tabs Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | tab-click | tab 被选中的钩子 | 被选中的标签 tab 实例 | | tab-remove | tab 被删除的钩子 | 被删除的标签 tab 实例 | ### Tab-pane Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | label | 选项卡标题 | string | — | — | | disabled | 是否禁用 | boolean | - | false | | name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' | | closable | 标签是否可关闭 | boolean | — | false |