<style scoped>
    .box{
        padding: 20px;
        border: solid 1px #eee;
        border-top: none;
        margin-bottom: 20px;
    }
    .source{
        padding: 20px;
        width: 500px !important;
    }
</style>

## Tabs 选项卡

### 基础用法
:::demo `v-model`属性为当前选中面板的`name`值，可做回显接口
```html
<mc-tabs v-model="activeKey">
    <mc-pane label="博派" name="autobots">
        <div class="box">擎天柱 & 大黄蜂...</div>
    </mc-pane>
    <mc-pane label="狂派" name="decepticons">
        <div class="box">威震天 & 瘟疫...</div>
    </mc-pane>
    <mc-pane label="蛋黄派" name="rhubarbPie">
        <div class="box">蛋黄 & 派...</div>
    </mc-pane>
</mc-tabs>

<script>
    export default {
        data(){
            return {
                activeKey: 'autobots'
            }
        }
    }
</script>
```
:::


### Tabs 属性

|参数		|说明		|类型		|可选值		|默认值		|
|-----------|-----------|-----------|-----------|-----------|
|v-model	|当前面板（selectbox-pane）的name值，可做回显接口	|String		| — 		| — 		|


<br><br>

### select-pane 属性

|参数		|说明		    |类型		|可选值		|默认值		|
|-----------|---------------|-----------|-----------|-----------|
|label	    |面板标题文本   	|String		| — 		| — 		|
|name	    |面板别名，会透传到 select-tabs 的 v-model 中  	    |String		| — 		| — 		|