element/examples/docs/tabs.md

<script>
  export default {
    data() {
      return {
        tabs: [{
          title: '选项卡一',
          content: '选项卡一内容'
        },{
          title: '选项卡二',
          content: '选项卡二内容'
        },{
          title: '选项卡三',
          content: '选项卡三内容'
        },{
          title: '选项卡四',
          content: '选项卡四内容'
        }],
        activeName: 'two',
        activeName2: ''
      }
    },
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>
<style>
  .el-tabs {
    margin-bottom: 30px;
  }
</style>

## 基础使用

Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。

在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`……。

下例会选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。

<div>
  <el-tabs>
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
  </el-tabs>
</div>

```html
<template>
  <el-tabs :active-name="activeName">
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'two'
      };
    }
  };
</script>
```

## 多种风格

除了上例中的风格外，我们还提供了标签和卡片两种风格，只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。

<div>
  <el-tabs type="card">
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
  </el-tabs>
</div>

```html
<el-tabs type="card">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>
```

<div>
  <el-tabs type="border-card">
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
  </el-tabs>
</div>

```html
<el-tabs type="border-card">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>
```

## 可关闭的标签

在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。

除此以外，我们在`el-tabs`中准备了两个钩子，用于在 Tab 被选中时和被删除时自定义属性：`on-click`和`on-remove`，接受`Function`，它们都提供一个参数`tab`，为操作的目标标签。

<div>
  <el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
  </el-tabs>
</div>

```html
<template>
  <el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    methods: {
      handleRemove(tab) {
        console.log(tab);
      },
      handleClick(tab) {
        console.log(tab);
      }
    }
  };
</script>
```

## Tabs Attributes
| 参数       | 说明     | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| type     | 风格类型   | string   | card, border-card  |         |
| closable  | 标签是否可关闭   | boolean   | true, false |  false  |
| active-name  | 选中选项卡的 name  | string   |    |    |
| on-click  | tab 被选中的钩子(提供一个参数tab)  | function | |    |
| on-remove  | tab 被删除的钩子(提供一个参数tab)  | function |   |

## TAB-PANE Attributes
| 参数       | 说明     | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| label     | 选项卡标题   | string   |  |         |
| name       | 与选项卡 activeName 对应的标识符，表示选项卡别名   | string   |  |  该选项卡在选项卡中的 name 值，如第一个选项卡则为'1'  |