<template>
    <docs-layout title="选项卡">
        <h2>概述</h2>
        <h3>选项卡组件，基于 CSS3 transition 实现水平平滑滚动。</h3>

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

        <h2>代码示例</h2>

        <div class="fuck cell-demo">
            <docs-demo title="普通调用">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-tab&gt;<br />        &lt;yd-tab-panel label="选项一"&gt;土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。&lt;/yd-tab-panel&gt;<br />        &lt;yd-tab-panel label="选项二"&gt;我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。&lt;/yd-tab-panel&gt;<br />        &lt;yd-tab-panel label="选项三"&gt;时间是一切财富中最宝贵的财富。&lt;/yd-tab-panel&gt;<br />        &lt;yd-tab-panel label="选项四"&gt;真理惟一可靠的标准就是永远自相符合。&lt;/yd-tab-panel&gt;<br />    &lt;/yd-tab&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">
                    <yd-tab style="height: 132px;">
                        <yd-tab-panel label="选项一">土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。</yd-tab-panel>
                        <yd-tab-panel label="选项二">我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。</yd-tab-panel>
                        <yd-tab-panel label="选项三">时间是一切财富中最宝贵的财富。</yd-tab-panel>
                        <yd-tab-panel label="选项四">真理惟一可靠的标准就是永远自相符合。</yd-tab-panel>
                    </yd-tab>
                </div>
                <div slot="interpre">
                    <p>通过设置<span>yd-tab-panel</span>组件的<span>label</span>属性定义选项卡的标题。</p>
                </div>
            </docs-demo>
            <docs-demo title="设置初始激活项">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-tab&gt;<br />        &lt;yd-tab-panel label="选项一"&gt;111111&lt;/yd-tab-panel&gt;<br />        &lt;yd-tab-panel label="选项二" active&gt;222222设置初始激活项&lt;/yd-tab-panel&gt;<br />        &lt;yd-tab-panel label="选项三"&gt;333333&lt;/yd-tab-panel&gt;<br />        &lt;yd-tab-panel label="选项四"&gt;444444&lt;/yd-tab-panel&gt;<br />    &lt;/yd-tab&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">
                    <yd-tab style="height: 88px;">
                        <yd-tab-panel label="选项一">111111</yd-tab-panel>
                        <yd-tab-panel label="选项二" active>222222设置初始激活项</yd-tab-panel>
                        <yd-tab-panel label="选项三">333333</yd-tab-panel>
                        <yd-tab-panel label="选项四">444444</yd-tab-panel>
                    </yd-tab>
                </div>
                <div slot="interpre">
                    <p>在需要初始激活选项的<span>yd-tab-panel</span>组件上设置<span>active</span>或<span>:active="true"</span>属性即可。</p>
                </div>
            </docs-demo>
        </div>

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

        <h3><strong>yd-tab-panel</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>label</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>
            <tr>
                <td>change</td>
                <td>切换时调用的函数（返回当前label）</td>
                <td>Function</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>

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