# Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。

## 何时使用
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

### 基本使用

基础的、简洁的标签页。

@[demo](./demo/basic.vue)


### 选项卡样式

选项卡样式的标签页。

@[demo](./demo/card.vue)


### 对齐方式
可以通过`align`设置对齐方式


@[demo](./demo/align.vue)


### 位置

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

@[demo](./demo/position.vue)


### 自定义标签页

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

@[demo](./demo/slot.vue)


### 动态增减标签页

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

@[demo](./demo/dynamic.vue)

### query模式

开启query模式，刷新页面后激活的选项卡与刷新之前的一致

@[demo](./demo/query.vue)

### 路由模式

使用路由模式

@[demo](./demo/router.vue)


### Tabs Attributes
| 参数       | 说明     | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| type     | 风格类型   | string   | card/border-card  |     —    |
| align     | 对齐方式   | string   | left/center/right  |     left    |
| closable  | 标签是否可关闭   | boolean   | — |  false  |
| addable  | 标签是否可增加   | boolean   | — |  false  |
| editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |
| value  | 绑定值，选中选项卡的 name，可使用 `v-model` 双向绑定  | string   |  —  |  第一个选项卡的 name |
| tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |
| keep-tabs-alive | 是否使用v-if隐藏当前未显示的tab | boolean | - | true |
| query | 是否启用 `query` 保证页面刷新之后激活的 `tab` 还是刷新之前的，开启 `router` 模式之后，此参数没用 | boolean | - | false |
| query-key | 使用 `query` 模式时设置 `queryKey`，当一个页面中有多个 tabs 使用 `query` 模式时最好传入此参数 | string | - | `'mm_tab_active'` |
| router | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 `Tab` 的 `route` 进行路由跳转 | boolean | - | false |

### Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| tab-click  | tab 被选中时触发 | 被选中的标签 tab 实例 |
| change  | active tab 改变后触发 | 被选中的 tab name 值 |
| tab-remove  | 点击 tab 移除按钮后触发  | 被删除的标签的 name |
| tab-add  | 点击 tabs 的新增按钮后触发  | — |
| edit  | 点击 tabs 的新增按钮或 tab 被关闭后触发  | (targetName, action) |

### Tab Attributes
| 参数       | 说明     | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| label     | 选项卡标题   | string   | — |    —     |
| disabled | 是否禁用 | boolean | — | false |
| name      | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
| closable  | 标签是否可关闭   | boolean   | — |  false  |
| route  | Vue Router 路径对象   | Object \| String   | — |  `{ path: name } // name 为 tab 的 name 属性`  |