<template>
    <docs-layout title="表单">
        <h2>概述</h2>
        <h3>列表视图，webapp 上最常用的内容结构，采用flex布局，适应各类结构；</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';<br />/* 使用px：import {CellGroup, CellItem} from 'vue-ydui/dist/lib.px/cell'; */<br /><br />Vue.component(CellGroup.name, CellGroup);<br />Vue.component(CellItem.name, CellItem);</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;div&gt;<br />        &lt;yd-cell-group&gt;<br />            &lt;yd-cell-item&gt;<br />                &lt;span slot="left"&gt;左边内容一&lt;/span&gt;<br />                &lt;span slot="right"&gt;右边内容一&lt;/span&gt;<br />            &lt;/yd-cell-item&gt;<br />            &lt;yd-cell-item&gt;<br />                &lt;span slot="left"&gt;左边内容二&lt;/span&gt;<br />                &lt;span slot="right"&gt;右边内容二&lt;/span&gt;<br />            &lt;/yd-cell-item&gt;<br />        &lt;/yd-cell-group&gt;<br /><br />        &lt;yd-cell-group&gt;<br />            &lt;yd-cell-item&gt;<br />                &lt;span slot="left"&gt;左边内容一&lt;/span&gt;<br />                &lt;span slot="right"&gt;右边内容一&lt;/span&gt;<br />            &lt;/yd-cell-item&gt;<br />            &lt;yd-cell-item&gt;<br />                &lt;span slot="left"&gt;左边内容二&lt;/span&gt;<br />                &lt;span slot="right"&gt;右边内容二&lt;/span&gt;<br />            &lt;/yd-cell-item&gt;<br />        &lt;/yd-cell-group&gt;<br />    &lt;/div&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-cell-group>
                        <yd-cell-item>
                            <span slot="left">左边内容一</span>
                            <span slot="right">右边内容一</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <span slot="left">左边内容二</span>
                            <span slot="right">右边内容二</span>
                        </yd-cell-item>
                    </yd-cell-group>
                    <yd-cell-group>
                        <yd-cell-item>
                            <span slot="left">左边内容一</span>
                            <span slot="right">右边内容一</span>
                        </yd-cell-item>
                        <yd-cell-item>
                            <span slot="left">左边内容二</span>
                            <span slot="right">右边内容二</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>使用<span>yd-cell-group</span>将列表分组；</p>
                    <p>通过<span>slot="left"</span>和<span>slot="right"</span>自定义每行列表左右内容。</p>
                </div>
            </docs-demo>
            <docs-demo title="添加箭头标识">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group&gt;<br />        &lt;yd-cell-item arrow&gt;<br />            &lt;span slot="left"&gt;左边内容一&lt;/span&gt;<br />            &lt;span slot="right"&gt;右边内容一&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&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-cell-group>
                        <yd-cell-item arrow>
                            <span slot="left">左边内容一</span>
                            <span slot="right">右边内容一</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>在<span>yd-cell-item</span>上添加<span>:arrow="true"</span>或<span>arrow</span>属性即可添加右向箭头。</p>
                </div>
            </docs-demo>
            <docs-demo title="设置列表DOM类型">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group&gt;<br />        &lt;yd-cell-item arrow type="a" href="tel:400-888-8888"&gt;<br />            &lt;span slot="left"&gt;这里是一个A链接&lt;/span&gt;<br />            &lt;span slot="right"&gt;href不会解析&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item arrow type="link" href="#"&gt;<br />            &lt;span slot="left"&gt;这里是一个Router-Link链接&lt;/span&gt;<br />            &lt;span slot="right"&gt;href会解析为路由&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item arrow type="label"&gt;<br />            &lt;span slot="left"&gt;这里是一个Label&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item arrow&gt;<br />            &lt;span slot="left"&gt;这里是一个普通DIV&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script&gt;<br />    export default {<br /><br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-cell-group>
                        <yd-cell-item arrow type="a" href="tel:400-888-8888">
                            <span slot="left">这里是一个A链接</span>
                            <span slot="right">href不会解析</span>
                        </yd-cell-item>
                        <yd-cell-item arrow type="link" href="#">
                            <span slot="left">这里是一个Router-Link链接</span>
                            <span slot="right">href会解析为路由</span>
                        </yd-cell-item>
                        <yd-cell-item arrow type="label">
                            <span slot="left">这里是一个Label</span>
                        </yd-cell-item>
                        <yd-cell-item arrow>
                            <span slot="left">这里是一个普通DIV</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>生成后的列表共有三种DOM类型<span>&lt;a&gt;</span>,<span>&lt;label&gt;</span>,<span>&lt;div&gt;</span>；</p>
                    <p>DOM类型<span>&lt;a&gt;</span>有两种实现方式：<span>type="link"</span>和<span>type="a"</span>；</p>
                    <p>设置<span>yd-cell-item</span>的<span>type</span>属性即可改变列表类型，另外<span>type="link"</span>需额外设置<span>href</span>属性。</p>
                </div>
            </docs-demo>
            <docs-demo title="添加图标">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group&gt;<br />        &lt;yd-cell-item arrow&gt;<br />            &lt;yd-icon slot="icon" name="order" size=".42rem"&gt;&lt;/yd-icon&gt;<br />            &lt;span slot="left"&gt;我的订单&lt;/span&gt;<br />            &lt;span slot="right"&gt;查看全部订单&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br /><br />        &lt;yd-cell-item arrow&gt;<br />            &lt;img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png"&gt;<br />            &lt;span slot="left"&gt;图标&lt;/span&gt;<br />            &lt;span slot="right"&gt;图标是image&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&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-cell-group>
                        <yd-cell-item arrow type="link" href="#">
                            <yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
                            <span slot="left">我的订单</span>
                            <span slot="right">查看全部订单</span>
                        </yd-cell-item>

                        <yd-cell-item arrow type="link" href="#">
                            <img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
                            <span slot="left">图标</span>
                            <span slot="right">图标是image</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <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-cell-group title="这里是一个标题"&gt;<br />        &lt;yd-cell-item arrow href="#" type="link"&gt;<br />            &lt;yd-icon slot="icon" name="order" size=".42rem"&gt;&lt;/yd-icon&gt;<br />            &lt;span slot="left"&gt;我的订单&lt;/span&gt;<br />            &lt;span slot="right"&gt;查看全部订单&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item arrow href="#" type="link"&gt;<br />            &lt;yd-icon slot="icon" name="like-outline" size=".42rem"&gt;&lt;/yd-icon&gt;<br />            &lt;span slot="left"&gt;我的收藏&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />    <br />    &lt;yd-cell-group title="这里是另外一个标题"&gt;<br />        &lt;yd-cell-item arrow href="#" type="link"&gt;<br />            &lt;yd-icon slot="icon" name="order" size=".42rem"&gt;&lt;/yd-icon&gt;<br />            &lt;span slot="left"&gt;我的订单&lt;/span&gt;<br />            &lt;span slot="right"&gt;查看全部订单&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />        &lt;yd-cell-item arrow href="#" type="link"&gt;<br />            &lt;yd-icon slot="icon" name="like-outline" size=".42rem"&gt;&lt;/yd-icon&gt;<br />            &lt;span slot="left"&gt;我的收藏&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&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-cell-group title="这里是一个标题">
                        <yd-cell-item arrow href="#" type="link">
                            <yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
                            <span slot="left">我的订单</span>
                            <span slot="right">查看全部订单</span>
                        </yd-cell-item>
                        <yd-cell-item arrow href="#" type="link">
                            <yd-icon slot="icon" name="like-outline" size=".42rem"></yd-icon>
                            <span slot="left">我的收藏</span>
                        </yd-cell-item>
                    </yd-cell-group>
                    <yd-cell-group title="这里是另外一个标题">
                        <yd-cell-item arrow href="#" type="link">
                            <yd-icon slot="icon" name="order" size=".42rem"></yd-icon>
                            <span slot="left">我的订单</span>
                            <span slot="right">查看全部订单</span>
                        </yd-cell-item>
                        <yd-cell-item arrow href="#" type="link">
                            <yd-icon slot="icon" name="like-outline" size=".42rem"></yd-icon>
                            <span slot="left">我的收藏</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>设置<span>yd-cell-group</span>的<span>title</span>属性即可。</p>
                </div>
            </docs-demo>
            <docs-demo title="使用文本框、下拉选择框">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;span slot="left"&gt;手机号：&lt;/span&gt;<br />            &lt;input slot="right" type="number" placeholder="请输入手机号"&gt;<br />        &lt;/yd-cell-item&gt;<br />        <br />        &lt;yd-cell-item arrow type="label"&gt;<br />            &lt;select slot="right"&gt;<br />                &lt;option value=""&gt;支付方式&lt;/option&gt;<br />                &lt;option value="1"&gt;支付宝&lt;/option&gt;<br />                &lt;option value="2"&gt;微信&lt;/option&gt;<br />                &lt;option value="3"&gt;财付通&lt;/option&gt;<br />            &lt;/select&gt;<br />        &lt;/yd-cell-item&gt;<br />        <br />        &lt;yd-cell-item arrow type="label"&gt;<br />            &lt;span slot="left"&gt;性别：&lt;/span&gt;<br />            &lt;select slot="right"&gt;<br />                &lt;option value=""&gt;请选择性别&lt;/option&gt;<br />                &lt;option value="1"&gt;男&lt;/option&gt;<br />                &lt;option value="2"&gt;女&lt;/option&gt;<br />                &lt;option value="3"&gt;未知&lt;/option&gt;<br />            &lt;/select&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&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-cell-group>
                        <yd-cell-item>
                            <span slot="left">手机号：</span>
                            <input slot="right" type="number" placeholder="请输入手机号">
                        </yd-cell-item>
                        <yd-cell-item arrow type="label">
                            <select slot="right">
                                <option value="">支付方式</option>
                                <option value="1">支付宝</option>
                                <option value="2">微信</option>
                                <option value="3">财付通</option>
                            </select>
                        </yd-cell-item>
                        <yd-cell-item arrow type="label">
                            <span slot="left">性别：</span>
                            <select slot="right">
                                <option value="">请选择性别</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                                <option value="3">未知</option>
                            </select>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>使用<span>slot="right"</span>定义内容即可。</p>
                </div>
            </docs-demo>
            <docs-demo title="使用多选框">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group title="多选"&gt;<br />        &lt;yd-cell-item type="checkbox"&gt;<br />            &lt;span slot="left"&gt;多选一&lt;/span&gt;<br />            &lt;input slot="right" type="checkbox" value="Han MeiMei" v-model="checkedNames"/&gt;<br />        &lt;/yd-cell-item&gt;<br /><br />        &lt;yd-cell-item type="checkbox"&gt;<br />            &lt;span slot="left"&gt;多选二&lt;/span&gt;<br />            &lt;input slot="right" type="checkbox" value="Li Lei" v-model="checkedNames"/&gt;<br />        &lt;/yd-cell-item&gt;<br /><br />        &lt;yd-cell-item type="checkbox"&gt;<br />            &lt;span slot="left"&gt;多选三&lt;/span&gt;<br />            &lt;input slot="right" type="checkbox" value="Jim Green" v-model="checkedNames"/&gt;<br />        &lt;/yd-cell-item&gt;<br /><br />        &lt;yd-cell-item&gt;<br />            &lt;span slot="left"&gt;选中的值：&lt;/span&gt;<br />            &lt;span slot="right"&gt;{<span>{</span>checkedNames<span>}</span>}&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                checkedNames: ['Han MeiMei']<br />            }<br />        }<br />    }<br />&lt;/script&gt;<br /></code></pre>
                <div slot="demo">
                    <yd-cell-group title="多选">
                        <yd-cell-item type="checkbox">
                            <span slot="left">多选一</span>
                            <input slot="right" type="checkbox" value="Han MeiMei" v-model="checkedNames"/>
                        </yd-cell-item>

                        <yd-cell-item type="checkbox">
                            <span slot="left">多选二</span>
                            <input slot="right" type="checkbox" value="Li Lei" v-model="checkedNames"/>
                        </yd-cell-item>

                        <yd-cell-item type="checkbox">
                            <span slot="left">多选三</span>
                            <input slot="right" type="checkbox" value="Jim Green" v-model="checkedNames"/>
                        </yd-cell-item>

                        <yd-cell-item>
                            <span slot="left">选中的值：</span>
                            <span slot="right">{{checkedNames}}</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>设置<span>yd-cell-item</span>的<span>type</span>属性为<span>checkbox</span>即可。</p>
                </div>
            </docs-demo>
            <docs-demo title="使用单选框">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group title="单选"&gt;<br />        &lt;yd-cell-item type="radio"&gt;<br />            &lt;span slot="left"&gt;单选一&lt;/span&gt;<br />            &lt;input slot="right" type="radio" value="Lili" v-model="picked"/&gt;<br />        &lt;/yd-cell-item&gt;<br /><br />        &lt;yd-cell-item type="radio"&gt;<br />            &lt;span slot="left"&gt;单选二&lt;/span&gt;<br />            &lt;input slot="right" type="radio" value="Lucy" v-model="picked"/&gt;<br />        &lt;/yd-cell-item&gt;<br /><br />        &lt;yd-cell-item&gt;<br />            &lt;span slot="left"&gt;选中的值：&lt;/span&gt;<br />            &lt;span slot="right"&gt;{<span>{</span>picked<span>}</span>}&lt;/span&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                picked: 'Lucy'<br />            }<br />        }<br />    }<br />&lt;/script&gt;<br /></code></pre>
                <div slot="demo">
                    <yd-cell-group title="单选">
                        <yd-cell-item type="radio">
                            <span slot="left">单选一</span>
                            <input slot="right" type="radio" value="Lili" v-model="picked"/>
                        </yd-cell-item>

                        <yd-cell-item type="radio">
                            <span slot="left">单选二</span>
                            <input slot="right" type="radio" value="Lucy" v-model="picked"/>
                        </yd-cell-item>

                        <yd-cell-item>
                            <span slot="left">选中的值：</span>
                            <span slot="right">{{picked}}</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>设置<span>yd-cell-item</span>的<span>type</span>属性为<span>radio</span>即可。</p>
                </div>
            </docs-demo>
            <docs-demo title="使用switch复选框">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group&gt;<br />        &lt;yd-cell-item type="label"&gt;<br />            &lt;div slot="left"&gt;设为默认地址 - {<span>{</span>ydswitch<span>}</span>}&lt;/div&gt;<br />            &lt;yd-switch slot="right" v-model="ydswitch"&gt;&lt;/yd-switch&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                ydswitch: false<br />            }<br />        }<br />    }<br />&lt;/script&gt;<br /></code></pre>
                <div slot="demo">
                    <yd-cell-group>
                        <yd-cell-item type="label">
                            <div slot="left">设为默认地址 - {{ydswitch}}</div>
                            <yd-switch slot="right" v-model="ydswitch"></yd-switch>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>前提已经导入并注册<span>yd-switch</span>组件。</p>
                </div>
            </docs-demo>
            <docs-demo title="使用多行文本域">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-cell-group title="文本域"&gt;<br />        &lt;yd-cell-item&gt;<br />            &lt;yd-textarea slot="right" placeholder="请输入您的银行卡卡号和密码" maxlength="100"&gt;&lt;/yd-textarea&gt;<br />        &lt;/yd-cell-item&gt;<br />    &lt;/yd-cell-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-cell-group title="文本域">
                        <yd-cell-item>
                            <yd-textarea slot="right" placeholder="请输入您的银行卡卡号和密码" maxlength="100"></yd-textarea>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
                <div slot="interpre">
                    <p>需额外引入 <span>yd-textarea</span> 组件，具体使用请看<router-link to="/textarea">这里</router-link>。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>

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

        <h3><strong>yd-cell-group</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>title</td>
                <td>每组列表的标题</td>
                <td>String</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>

        <h3><strong>yd-cell-item</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>type</td>
                <td>列表的类型，<span>type="link"</span>的href将会解析为路由，<span>type="a"</span>是普通&lt;a&gt;</td>
                <td>String</td>
                <td><span>link</span>,<span>a</span>,<span>label</span>,<span>div</span>,<span>checkbx</span>,<span>radio</span></td>
                <td>div</td>
            </tr>
            <tr>
                <td>arrow</td>
                <td>是否带右向箭头</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
            <tr>
                <td>href</td>
                <td>跳转链接，只在<span>type="link"</span>时生效</td>
                <td>String || Object</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>

        <h3><strong>yd-cell-item</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>icon</td>
                <td>列表的图标</td>
            </tr>
            <tr>
                <td>left</td>
                <td>列表左侧内容</td>
            </tr>
            <tr>
                <td>right</td>
                <td>列表右侧内容</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                checkedNames: ['Han MeiMei'],
                picked: 'Lucy',
                ydswitch: false
            }
        }
    }
</script>
