## Tabs 标签页
-------------------
分隔内容上有关联但属于不同类别的数据集合。
### 基础用法
基础的、简洁的标签页。
Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。
:::demo
```html
用户管理
配置管理
角色管理
定时任务补偿
```
:::
### 禁用某一项
可禁用标签页中某一项。Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。
:::demo
```html
用户管理
配置管理
角色管理
定时任务补偿
```
:::
### 选项卡样式
选项卡样式的标签页。
只需要设置 `type` 属性为 `card` 就可以使选项卡改变为标签风格。
:::demo
```html
用户管理
配置管理
角色管理
定时任务补偿
```
:::
### 卡片化
卡片化的标签页。将`type`设置为`border-card`。
:::demo
```html
用户管理
配置管理
角色管理
定时任务补偿
```
:::
### 位置
可以通过 `tab-position` 设置标签的位置
标签一共有四个方向的设置 `tabPosition="left|right|top|bottom"`
:::demo
```html
top
right
bottom
left
用户管理
配置管理
角色管理
定时任务补偿
```
:::
### 自定义标签页
可以通过具名 `slot` 来实现自定义标签页的内容
:::demo
```html
我的行程
我的行程
消息中心
角色管理
定时任务补偿
```
:::
### 动态增减标签页
增减标签页按钮只能在选项卡样式的标签页下使用
:::demo
```html
{{item.content}}
```
:::
### 自定义增加标签页触发器
:::demo
```html
add tab
{{item.content}}
```
:::
### Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| type | 风格类型 | string | card/border-card | — |
| closable | 标签是否可关闭 | boolean | — | false |
| addable | 标签是否可增加 | boolean | — | false |
| editable | 标签是否同时可增加和关闭 | boolean | — | false |
| value | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name |
| tab-position | 选项卡所在位置 | string | top/right/bottom/left | top |
### Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| tab-click | tab 被选中时触发 | 被选中的标签 tab 实例 |
| tab-remove | 点击 tab 移除按钮后触发 | 被删除的标签的 name |
| tab-add | 点击 tabs 的新增按钮后触发 | — |
| edit | 点击 tabs 的新增按钮或 tab 被关闭后触发 | (targetName, action) |
### Tab-pane Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选项卡标题 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
| closable | 标签是否可关闭 | boolean | — | false |