# Tabs 标签页
---
#### 选项卡切换组件。
### 样式一
使用```value```来表示默认选中

<div class="demo-block">
  <y-tabs :value="3" :animated="animated">
      <y-tabpane label="标题内容一" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="标题内容二" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="标题内容三" name="3">我是内容3....</y-tabpane>
  </y-tabs>
</div>
<script>
  export default{
    data(){
      return{
        animated:false
      }
    }
  }
</script>

::: demo

```html
<div>
    <y-tabs :value="3">
      <y-tabpane label="标题内容一" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="标题内容二" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="标题内容三" name="3">我是内容3....</y-tabpane>
  </y-tabs>
</div>
```
:::

### 样式二
使用```simple```来表示简洁模式

<div class="demo-block" style="background:#EDF0F2">
  <y-tabs :value="3" simple>
      <y-tabpane label="标题内容一" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="标题内容二" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="标题内容三" name="3">
      我是内容3....<br/>
      我是内容3....<br/>
      我是内容3....
      </y-tabpane>
  </y-tabs>
</div>

::: demo

```html
<div style="background:#EDF0F2">
    <y-tabs :value="3" simple>
      <y-tabpane label="标题内容一" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="标题内容二" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="标题内容三" name="3">
      我是内容3....<br/>
      我是内容3....<br/>
      我是内容3....
      </y-tabpane>
  </y-tabs>
</div>
```
:::

### 样式三
使用```card```来表示卡片模式

<div class="demo-block" style="background:#EDF0F2">
  <y-tabs :value="1" card>
      <y-tabpane label="标题内容一" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="标题内容二" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="标题内容三" name="3">
      我是内容3....<br/>
      我是内容3....<br/>
      我是内容3....
      </y-tabpane>
  </y-tabs>
</div>

::: demo

```html
<div style="background:#EDF0F2">
    <y-tabs :value="1" card >
      <y-tabpane label="标题内容一" name="1">我是内容1....</y-tabpane>
      <y-tabpane label="标题内容二" name="2">我是内容2....</y-tabpane>
      <y-tabpane label="标题内容三" name="3">
      我是内容3....<br/>
      我是内容3....<br/>
      我是内容3....
      </y-tabpane>
  </y-tabs>
</div>
```
:::


### y-tabs 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| value     | 默认选中项   | Number    |  -       |  -  |
| card     | 卡片样式   | Boolean    |  -       |  false  |
| simple     | 简洁模式   | Boolean    |  -       |  false  |


### y-tabpane 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
| label     | 选项卡名字   | String    |  -       |  -  |
| name      | 标识当前面板，对应value   | Nmuber   |  -       |  - |