# Tab 标签页

### 引入

```js
import yTabs from "yesaway-wui/src/components/yTabs";
import yTabItem from "yesaway-wui/src/components/yTabItem";
```

## 代码演示

### 基础用法
通过 `selected` 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。
`swipeable`属性可将标签页切换方式修改为滚动切换。
```html
<y-tabs swipeable :selected.sync="index">
    <y-tab-item title="当前任务" selected>
        <div>
            内容1
        </div>
    </y-tab-item>
    <y-tab-item title="历史">
        <div>
            内容2
        </div>
    </y-tab-item>
</y-tabs>
```
```html
export default {
    data() {
        return {
            index: 0,  
        };
    },
};

```
### 样式风格
Tab 可以通过 `type` 属性切换`normal` `switch` `gradient`三种样式风格。
```html
<y-tabs swipeable type="switch">
    <y-tab-item title="当前任务" selected></y-tab-item>
    <y-tab-item title="历史"></y-tab-item>
</y-tabs>
```
同时还可以通过设置`topic`为`gray`将切换为灰色主题样式。
```html
<y-tabs swipeable topic="gray">
    <y-tab-item title="当前任务" selected></y-tab-item>
    <y-tab-item title="历史"></y-tab-item>
</y-tabs>
```
通过`size`可调整标签栏高度，可选值有`normal``small``mini`，默认为`normal`。
```html
<y-tabs swipeable topic="gray" size="small">
    <y-tab-item title="当前任务" selected></y-tab-item>
    <y-tab-item title="历史"></y-tab-item>
</y-tabs>
```

### 固定顶部
通过 `fixed` 属性可以将Tab栏固定到屏幕顶部。
```html
<y-tabs swipeable type="switch" fixed>
    <y-tab-item title="当前任务" selected></y-tab-item>
    <y-tab-item title="历史"></y-tab-item>
</y-tabs>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| selected | 绑定当前选中标签的标识符 | _number\string_ | 0 |
| type | 样式风格类型，可选值为 `normal``switch` `gradient` | _string_ | normal |
| topic | 样式主题，可选值为 `main` `gray` | _string_ | main |
| size | 标签栏高度，可选值为 `normal``small``mini` | _string_ | normal |
| fixed | 是否固定到顶部 | _Boolean_ | false |
| split | 标签栏标签分割线，仅在`type="normal"`时有效 | _Boolean_ | false |
| swipeable | 标签页以滚动方式切换，仅在`type="normal"`时有效 | _Boolean_ | false |
| custom-class | 额外类名 | _string_ | --- |
| content-class | 标签页额外类名 | _string_ | --- |
| roll-content | --- | _Boolean_ | false |

### Slots

| 名称           | 说明           |
| -------------- | -------------- |
| title        | 标题       |
| left         | 左侧按钮       |
| right        | 右侧按钮       |