# tabs (w-tabs)

- **Import**: `WTabs` from `win-design-next`
- **Tag**: `<w-tabs>`
- **说明**: Tabs 标签页
- **分类**: navigation
- **Skill 版本**: V1.1.0
- **适配组件库**: win-design-next 1.2.2
- **API 来源**: `docs/zh-CN/component/tabs.md`

## API

## Tabs API

### Attributes

| 属性名                | 说明                                                                                  | 类型                                                                            | Default    |
| --------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------- |
| model-value / v-model | 绑定值，选中选项卡的 name，默认值是第一个 tab 的 name                                 | ^[string] / ^[number]                                                           | —          |
| type                  | 风格类型                                                                              | ^[enum]`'' \| 'card' \| 'border-card'`                                          | ''         |
| closable              | 标签是否可关闭                                                                        | ^[boolean]                                                                      | false      |
| addable               | 标签是否可增加                                                                        | ^[boolean]                                                                      | false      |
| editable              | 标签是否同时可增加和关闭                                                              | ^[boolean]                                                                      | false      |
| tab-position          | 选项卡所在位置                                                                        | ^[enum]`'top' \| 'right' \| 'bottom' \| 'left'`                                 | top        |
| stretch               | 标签的宽度是否自撑开                                                                  | ^[boolean]                                                                      | false      |
| before-leave          | 切换标签之前的钩子函数， 若返回 `false ` 或者返回被 reject 的 `Promise`，则阻止切换。 | ^[Function]`(activeName: TabPaneName, oldActiveName: TabPaneName) => Awaitable` | () => true |

### Events

| 事件名     | 说明                            | 回调参数                                                                             |
| ---------- | ------------------------------- | ------------------------------------------------------------------------------------ |
| tab-click  | tab 被选中时触发                | ^[Function]`(pane: TabsPaneContext, ev: Event) => void`                              |
| tab-change | `activeName` 改变时触发         | ^[Function]`(name: TabPaneName) => void`                                             |
| tab-remove | 点击 tab 移除按钮时触发         | ^[Function]`(name: TabPaneName) => void`                                             |
| tab-add    | 点击 tab 新增按钮时触发         | ^[Function]`() => void`                                                              |
| edit       | 点击 tab 的新增或移除按钮后触发 | ^[Function]`(paneName: TabPaneName \| undefined, action: 'remove' \| 'add') => void` |

### Slots

| 插槽名   | 说明               | 子标签   |
| -------- | ------------------ | -------- |
| default  | 默认插槽           | Tab-pane |
| add-icon | 自定义添加按钮图标 | —        |
