<script>
export default {
    components: {},
    data() {
        return{
            value: 'user',
            changeTabs: function($event) {
               this.value = $event
            }
        }
    }
}
</script>
# Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。

## 基础用法
:::demo 使用`f-icon`嵌入图标
````html
<efly-tabs :value="value" @change="changeTabs($event)">
    <efly-tabs-pane value="user">用户管理</efly-tabs-pane>
    <efly-tabs-pane value="config">配置管理</efly-tabs-pane>
    <efly-tabs-pane value="role">角色管理</efly-tabs-pane>
    <efly-tabs-pane value="task">定时任务补偿</efly-tabs-pane>
</efly-tabs>
<script>
export default {
    components: {},
    data() {
        return{
            value: 'user',
            changeTabs: function($event) {
               this.value = $event
            }
        }
    }
}
</script>
````
:::

## 卡片用法
:::demo 使用`f-icon`嵌入图标
````html
<efly-tabs :value="value" type="card" @change="changeTabs($event)">
    <efly-tabs-pane value="user">用户管理</efly-tabs-pane>
    <efly-tabs-pane value="config">配置管理</efly-tabs-pane>
    <efly-tabs-pane value="role">角色管理</efly-tabs-pane>
    <efly-tabs-pane value="task">定时任务补偿</efly-tabs-pane>
</efly-tabs>
<div style="width:100%;background:#F5F9FC;height:20px"></div>
<script>
export default {
    components: {},
    data() {
        return{
            value: 'user',
            changeTabs: function($event) {
               this.value = $event
            }
        }
    }
}
</script>
````
:::


## 参数说明
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| value     | 绑定并事件返回的值   | Any  |     —        |    —     |
| type    | 类型   | String  |     base / card        |    base     |

## 事件
| 事件名称      | 说明    | 回调参数   
|---------- |-------- |---------- |
| change     | 点击事件   | 传入的value值  |
