<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 {Badge} from 'vue-ydui/dist/lib.rem/badge';<br />/* 使用px：import {Badge} from 'vue-ydui/dist/lib.px/badge'; */<br /><br />Vue.component(Badge.name, Badge);</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-grids-group :rows="2"&gt;<br />        &lt;yd-grids-item&gt;<br />            &lt;img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png"&gt;<br />            &lt;span slot="text"&gt;image&lt;/span&gt;<br />        &lt;/yd-grids-item&gt;<br />        &lt;yd-grids-item&gt;<br />            &lt;yd-icon slot="icon" name="home" color="#FF685D"&gt;&lt;/yd-icon&gt;<br />            &lt;span slot="text"&gt;iconfont&lt;/span&gt;<br />        &lt;/yd-grids-item&gt;<br />    &lt;/yd-grids-group&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-grids-group :rows="2">
                        <yd-grids-item>
                            <img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
                            <span slot="text">image</span>
                        </yd-grids-item>
                        <yd-grids-item>
                            <yd-icon slot="icon" name="home" color="#FF685D"></yd-icon>
                            <span slot="text">iconfont</span>
                        </yd-grids-item>
                    </yd-grids-group>
                </div>
                <div slot="interpre">
                    <p>在 <span>yd-grids-group</span> 组件上添加 <span>rows="2"</span>即为两列表格；</p>
                    <p>通过 <span>slot="icon"</span> 自定义图标，<span>slot="text"</span> 自定义显示文字。</p>
                </div>
            </docs-demo>
            <docs-demo title="等分三列（添加标题）">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-grids-group :rows="3" title="等分3列"&gt;<br />        &lt;yd-grids-item v-for="n in 6"&gt;<br />            &lt;span slot="text"&gt;grids-3&lt;/span&gt;<br />        &lt;/yd-grids-item&gt;<br />    &lt;/yd-grids-group&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-grids-group :rows="3" title="等分3列">
                        <yd-grids-item v-for="n in 6">
                            <span slot="text">grids-3</span>
                        </yd-grids-item>
                    </yd-grids-group>
                </div>
                <div slot="interpre">
                    <p>在 <span>yd-grids-group</span> 组件上添加 <span>title="标题标题"</span>即可。</p>
                </div>
            </docs-demo>
        </div>

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

        <h3><strong>yd-grids-group</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>rows</td>
                <td>每行显示列数</td>
                <td>Number</td>
                <td><span>2</span>, <span>3</span>, <span>4</span>, <span>5</span></td>
                <td>4</td>
            </tr>
            <tr>
                <td>title</td>
                <td>每组表格标题</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>

        <h3><strong>yd-grids</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>icon</td>
                <td>图标内容</td>
            </tr>
            <tr>
                <td>text</td>
                <td>文字内容</td>
            </tr>
        </docs-table>

        <h3><strong>yd-grids</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>link</td>
                <td>跳转URL</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>

    </docs-layout>
</template>

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