<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 {TabBar, TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar';<br />/* 使用px：import {TabBar, TabBarItem} from 'vue-ydui/dist/lib.px/tabbar'; */<br /><br />Vue.component(TabBar.name, TabBar);<br />Vue.component(TabBarItem.name, TabBarItem);</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-tabbar&gt;<br />        &lt;yd-tabbar-item title="首页" link="#"&gt;<br />            &lt;yd-icon name="home" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />        &lt;yd-tabbar-item title="购物车" link="#"&gt;<br />            &lt;yd-icon name="shopcart-outline" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />        &lt;yd-tabbar-item title="个人中心" link="#"&gt;<br />            &lt;yd-icon name="ucenter-outline" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />        &lt;yd-tabbar-item title="图片" link="#"&gt;<br />            &lt;img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png"&gt;<br />        &lt;/yd-tabbar-item&gt;<br />    &lt;/yd-tabbar&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-tabbar>
                        <yd-tabbar-item title="首页" link="#">
                            <yd-icon name="home-outline" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                        <yd-tabbar-item title="购物车" link="#">
                            <yd-icon name="shopcart-outline" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                        <yd-tabbar-item title="个人中心" link="#">
                            <yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                        <yd-tabbar-item title="图片" link="#">
                            <img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
                        </yd-tabbar-item>
                    </yd-tabbar>
                </div>
                <div slot="interpre">
                    <p>设置<span>yd-tabbar-item</span>的<span>title</span>属性改变导航的标题；</p>
                    <p>通过<span>slot="icon"</span>自定义图标。</p>
                </div>
            </docs-demo>
            <docs-demo title="添加高亮">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-tabbar&gt;<br />        &lt;yd-tabbar-item title="首页" link="#"&gt;<br />            &lt;yd-icon name="home" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />        &lt;yd-tabbar-item title="购物车" link="#" active&gt;<br />            &lt;yd-icon name="shopcart" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />        &lt;yd-tabbar-item title="个人中心" link="#"&gt;<br />            &lt;yd-icon name="ucenter-outline" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />    &lt;/yd-tabbar&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-tabbar>
                        <yd-tabbar-item title="首页" link="#">
                            <yd-icon name="home-outline" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                        <yd-tabbar-item title="购物车" link="#" active>
                            <yd-icon name="shopcart" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                        <yd-tabbar-item title="个人中心" link="#">
                            <yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                    </yd-tabbar>
                </div>
                <div slot="interpre">
                    <p>在<span>yd-tabbar-item</span>上添加<span>:active="true"</span>或<span>active</span>属性即可。</p>
                </div>
            </docs-demo>
            <docs-demo title="添加未读消息">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-tabbar&gt;<br />        &lt;yd-tabbar-item title="首页" link="#"&gt;<br />            &lt;yd-icon name="home-outline" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />        &lt;yd-tabbar-item title="购物车" link="#" dot&gt;<br />            &lt;yd-icon name="shopcart-outline" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />        &lt;/yd-tabbar-item&gt;<br />        &lt;yd-tabbar-item title="个人中心" link="#" active&gt;<br />            &lt;yd-icon name="ucenter" slot="icon" size="0.54rem"&gt;&lt;/yd-icon&gt;<br />            &lt;yd-badge slot="badge" type="danger"&gt;2&lt;/yd-badge&gt;<br />        &lt;/yd-tabbar-item&gt;<br />    &lt;/yd-tabbar&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;<br /></code></pre>
                <div slot="demo">
                    <yd-tabbar>
                        <yd-tabbar-item title="首页" link="#">
                            <yd-icon name="home-outline" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                        <yd-tabbar-item title="购物车" link="#" dot>
                            <yd-icon name="shopcart-outline" slot="icon" size="0.54rem"></yd-icon>
                        </yd-tabbar-item>
                        <yd-tabbar-item title="个人中心" link="#" active>
                            <yd-icon name="ucenter" slot="icon" size="0.54rem"></yd-icon>
                            <yd-badge slot="badge" type="danger">2</yd-badge>
                        </yd-tabbar-item>
                    </yd-tabbar>
                </div>
                <div slot="interpre">
                    <p>在<span>yd-tabbar-item</span>上添加<span>:dot="true"</span>或<span>dot</span>属性即可生成小红点；</p>
                    <p>通过<span>slot="badge"</span>放置角标。</p>
                </div>
            </docs-demo>
        </div>
        <h2>API</h2>
        <h3><strong>yd-tabbar</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容</td>
            </tr>
        </docs-table>
        <h3><strong>yd-tabbar</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>fixed</td>
                <td>是否fixed定位</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
            <tr>
                <td>activeColor</td>
                <td>选中颜色 && 常规颜色值</td>
                <td>String</td>
                <td>-</td>
                <td>#09BB07</td>
            </tr>
            <tr>
                <td>bgcolor</td>
                <td>背景颜色</td>
                <td>String && 常规颜色值</td>
                <td>-</td>
                <td>#FFF</td>
            </tr>
            <tr>
                <td>fontsize</td>
                <td>标题字体大小</td>
                <td>String</td>
                <td>-</td>
                <td>.4rem</td>
            </tr>
            <tr>
                <td>color</td>
                <td>标题字体颜色</td>
                <td>String && 常规颜色值</td>
                <td>-</td>
                <td>#5C5C5C</td>
            </tr>
        </docs-table>
        <h3><strong>yd-tabbar-item</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容</td>
            </tr>
            <tr>
                <td>badge</td>
                <td>添加角标</td>
            </tr>
        </docs-table>

        <h3><strong>yd-tabbar-item</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>link</td>
                <td>导航链接</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>title</td>
                <td>导航标题</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>active</td>
                <td>是否高亮</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
            <tr>
                <td>dot</td>
                <td>是否添加小红点</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
        </docs-table>

        <p style="padding-left: 20px;color:#F00;">自定义顶部边框颜色，需通过样式的方式实现：</p>
        <docs-import :tip="false" style="margin-top: 5px;">
            <pre class="pre" v-hljs><code class="css">.tabbbar-top-line-color:after {<br />    border-color: red !important;<br />}</code></pre>
        </docs-import>
    </docs-layout>
</template>
