<template>
    <docs-layout title="滚动选项卡">
        <h2>概述</h2>
        <h3>滚动选项卡插件，常用于分类列表。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {ScrollTab, ScrollTabPanel} from 'vue-ydui/dist/lib.rem/scrolltab';<br />/* 使用px：import {ScrollTab, ScrollTabPanel} from 'vue-ydui/dist/lib.px/scrolltab'; */<br /><br />Vue.component(ScrollTab.name, ScrollTab);<br />Vue.component(ScrollTabPanel.name, ScrollTabPanel);</code></pre>
        </docs-import>

        <h2>代码示例</h2>

        <div class="fuck">
            <docs-demo title="调用示例">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-scrolltab&gt;<br />        &lt;yd-scrolltab-panel label="空调" icon="demo-icons-category1"&gt;<br />            &lt;div style="height: 350px;background-color: gray;"&gt;&lt;/div&gt;<br />        &lt;/yd-scrolltab-panel&gt;<br /><br />        &lt;yd-scrolltab-panel label="冰箱" icon="demo-icons-category2" active&gt;<br />            &lt;div style="height: 350px;background-color: blue;"&gt;&lt;/div&gt;<br />        &lt;/yd-scrolltab-panel&gt;<br /><br />        &lt;yd-scrolltab-panel label="洗衣机" icon="demo-icons-category3"&gt;<br />            &lt;div style="height: 350px;background-color: yellow;"&gt;&lt;/div&gt;<br />        &lt;/yd-scrolltab-panel&gt;<br />        <br />        &lt;!-- ... --&gt;<br />    &lt;/yd-scrolltab&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <a style="color:#F00;" target="_blank" href="//vue.ydui.org/demo/#/scrolltab">点击这里查看效果</a>
                </div>
                <div slot="interpre">
                    <p>在<span>yd-scrolltab-panel</span>组件上设置<span>active</span>属性即初始化激活当前选项卡。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>
        <h3><strong>yd-scrolltab</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容</td>
            </tr>
        </docs-table>

        <h3><strong>yd-scrolltab-panel</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容</td>
            </tr>
        </docs-table>

        <h3><strong>yd-scrolltab-panel</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>label</td>
                <td>选项卡标题</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>icon</td>
                <td>图标（只支持图标样式名）</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>active</td>
                <td>是否高亮当前选项卡</td>
                <td>Boolean</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>
