<template>
    <docs-layout title="页面布局（可选）">
        <h2>概述</h2>
        <h3>移动端常见页面结构，通常包含 <span>页头</span>，<span>主体内容</span> 和 <span>页尾</span>，显示如下：</h3>
        <img style="margin-left: 20px;margin-top: 5px;" src="//static.ydcss.com/ydui/img/structure_vue.jpg">
        <h4 style="margin-top: 10px;">整个结构采用 <span>flex</span> 布局，宽高占满整个屏幕，<span>主体内容</span> 为纵向超出容器出现滚动条。</h4>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {Layout} from 'vue-ydui/dist/lib.rem/layout';<br />/* 使用px：import {Layout} from 'vue-ydui/dist/lib.px/layout'; */<br /><br />Vue.component(Layout.name, Layout);</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-layout&gt;<br />        &lt;yd-navbar slot="navbar" title="NavBar"&gt;<br />            &lt;router-link to="#" slot="left"&gt;<br />                &lt;yd-navbar-back-icon&gt;&lt;/yd-navbar-back-icon&gt;<br />            &lt;/router-link&gt;<br />        &lt;/yd-navbar&gt;<br /><br />        &lt;div&gt;乱七八糟的内容在这里，超出容器，将出现滚动条。&lt;/div&gt;<br />        &lt;div&gt;乱七八糟的内容在这里，超出容器，将出现滚动条。&lt;/div&gt;<br />        &lt;div&gt;乱七八糟的内容在这里，超出容器，将出现滚动条。&lt;/div&gt;<br /><br />        &lt;yd-tabbar slot="tabbar"&gt;<br />            &lt;yd-tabbar-item title="首页" link="#" active&gt;<br />                &lt;yd-icon name="home" slot="icon"&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"&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"&gt;&lt;/yd-icon&gt;<br />            &lt;/yd-tabbar-item&gt;<br />        &lt;/yd-tabbar&gt;<br /><br />    &lt;/yd-layout&gt;<br />&lt;/template&gt;<br />&lt;script&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo" style="height: 400px;">
                    <yd-layout>
                        <yd-navbar slot="navbar" title="NavBar">
                            <router-link to="#" slot="left">
                                <yd-navbar-back-icon></yd-navbar-back-icon>
                            </router-link>
                        </yd-navbar>

                        <div style="padding: 12px 12px 0 12px;">
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                        </div>

                        <yd-tabbar slot="tabbar">
                            <yd-tabbar-item title="首页" link="#" active>
                                <yd-icon name="home" slot="icon"></yd-icon>
                            </yd-tabbar-item>
                            <yd-tabbar-item title="购物车" link="#" >
                                <yd-icon name="shopcart-outline" slot="icon"></yd-icon>
                            </yd-tabbar-item>
                            <yd-tabbar-item title="个人中心" link="#">
                                <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
                            </yd-tabbar-item>
                        </yd-tabbar>

                    </yd-layout>
                </div>
                <div slot="interpre">
                    <p>通过 <span>slot="navbar"</span> 和 <span>slot="tabbar"</span> 定制页头和页尾。</p>
                </div>
            </docs-demo>
            <docs-demo title="快速调用页头">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-layout title="啦啦啦啦" link="#"&gt;<br />        <br />        &lt;div&gt;乱七八糟的内容在这里，超出容器，将出现滚动条。&lt;/div&gt;<br />        &lt;div&gt;乱七八糟的内容在这里，超出容器，将出现滚动条。&lt;/div&gt;<br />        &lt;div&gt;乱七八糟的内容在这里，超出容器，将出现滚动条。&lt;/div&gt;<br /><br />        &lt;yd-tabbar slot="tabbar"&gt;<br />            &lt;yd-tabbar-item title="首页" link="#"&gt;<br />                &lt;yd-icon name="home" slot="icon"&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"&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"&gt;&lt;/yd-icon&gt;<br />            &lt;/yd-tabbar-item&gt;<br />        &lt;/yd-tabbar&gt;<br /><br />    &lt;/yd-layout&gt;<br />&lt;/template&gt;<br />&lt;script&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo" style="height: 400px;">
                    <yd-layout title="啦啦啦啦" link="#">

                        <div style="padding: 12px 12px 0 12px;">
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                            <div>乱七八糟的内容在这里，超出容器，将出现滚动条。</div>
                        </div>

                        <yd-tabbar slot="tabbar">
                            <yd-tabbar-item title="首页" link="#" active>
                                <yd-icon name="home" slot="icon"></yd-icon>
                            </yd-tabbar-item>
                            <yd-tabbar-item title="购物车" link="#" >
                                <yd-icon name="shopcart-outline" slot="icon"></yd-icon>
                            </yd-tabbar-item>
                            <yd-tabbar-item title="个人中心" link="#">
                                <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
                            </yd-tabbar-item>
                        </yd-tabbar>

                    </yd-layout>
                </div>
                <div slot="interpre">
                    <p>通过指定 <span>yd-layout</span>组件的 <span>title</span> 和 <span>link</span>，快速调用 <span>&lt;yd-navbar&gt;</span> 组件。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>
        <h3><strong>yd-layout</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>navbar</td>
                <td>页头内容</td>
            </tr>
            <tr>
                <td>-</td>
                <td>主体内容</td>
            </tr>
            <tr>
                <td>tabbar</td>
                <td>页尾内容</td>
            </tr>
        </docs-table>

        <h3><strong>yd-layout</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>link</td>
                <td>yd-navbar的跳转链接</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>title</td>
                <td>yd-navbar的标题</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>showNavbar</td>
                <td>是否显示yd-navbar</td>
                <td>Boolean</td>
                <td>-</td>
                <td>true</td>
            </tr>
        </docs-table>

    </docs-layout>
</template>

<script type="text/babel">
    export default {

    }
</script>
