<template>
    <docs-layout title="按钮">
        <h2>概述</h2>
        <h3>常用按钮样式组件，提供2种尺寸和5种状态颜色，支持自定义颜色。</h3>

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

        <h2>代码示例</h2>

        <div class="fuck">
            <docs-demo title="普通按钮（宽度自适应）">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-button type="primary"&gt;primary&lt;/yd-button&gt;<br />        &lt;yd-button type="danger"&gt;danger&lt;/yd-button&gt;<br />        &lt;yd-button type="warning"&gt;warning&lt;/yd-button&gt;<br />        &lt;yd-button type="hollow"&gt;hollow&lt;/yd-button&gt;<br />        &lt;yd-button type="disabled" disabled&gt;disabled&lt;/yd-button&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-button type="primary">primary</yd-button>
                    <yd-button type="danger">danger</yd-button>
                    <yd-button type="warning">warning</yd-button>
                    <yd-button type="hollow">hollow</yd-button>
                    <yd-button type="disabled" disabled>disabled</yd-button>
                </div>
                <div slot="interpre">
                    <p>设置<span>type</span>属性改变按钮组件颜色；</p>
                </div>
            </docs-demo>

            <docs-demo title="块级按钮（宽度占100%）">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-button size="large" type="primary"&gt;primary&lt;/yd-button&gt;<br />        &lt;yd-button size="large" type="danger"&gt;danger&lt;/yd-button&gt;<br />        &lt;yd-button size="large" type="warning"&gt;warning&lt;/yd-button&gt;<br />        &lt;yd-button size="large" type="disabled" disabled&gt;disabled&lt;/yd-button&gt;<br />        &lt;yd-button size="large" type="hollow"&gt;hollow&lt;/yd-button&gt;<br />        &lt;yd-button size="large" bgcolor="#000" color="#FFF"&gt;Custom Color&lt;/yd-button&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-button size="large" type="primary">primary</yd-button>
                    <yd-button size="large" type="danger">danger</yd-button>
                    <yd-button size="large" type="warning">warning</yd-button>
                    <yd-button size="large" type="disabled" disabled>disabled</yd-button>
                    <yd-button size="large" type="hollow">hollow</yd-button>
                    <yd-button size="large" bgcolor="#000" color="#FFF">Custom Color</yd-button>
                </div>
                <div slot="interpre">
                    <p>设置<span>size</span>属性为large即为块级按钮；</p>
                    <p>设置<span>bgcolor</span>(背景颜色)和<span>color</span>(字体颜色)即可自定义按钮颜色。</p>
                </div>
            </docs-demo>

            <docs-demo title="将按钮分组">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-button-group&gt;<br />        &lt;yd-button size="large" type="primary"&gt;Block Button&lt;/yd-button&gt;<br />    &lt;/yd-button-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-button-group>
                        <yd-button size="large" type="primary">Block Button</yd-button>
                    </yd-button-group>
                </div>
                <div slot="interpre">
                    <p>实际上分组只是将按钮间隔屏幕两边的距离，否则按钮将贴至屏幕边缘，在块级按钮外部添加<span>yd-button-group</span>即可。</p>
                </div>
            </docs-demo>

            <docs-demo title="绑定事件">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-button-group&gt;<br />        &lt;yd-button size="large" @click.native="handleClick" type="danger"&gt;Bind Click&lt;/yd-button&gt;<br />    &lt;/yd-button-group&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        methods: {<br />            handleClick() {<br />                alert('Hello World!');<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-button-group>
                        <yd-button size="large" @click.native="handleClick" type="danger">Bind Click</yd-button>
                    </yd-button-group>
                </div>
                <div slot="interpre">
                    <p>使用@click不加修饰符绑定事件将是无效的。</p>
                </div>
            </docs-demo>
        </div>

        <h2>API</h2>

        <h3><strong>yd-button-group</strong>【slot】</h3>
        <docs-table :num="2">
            <tr>
                <td>-</td>
                <td>内容，将按钮间隔屏幕两边的距离</td>
            </tr>
        </docs-table>

        <h3><strong>yd-button</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>type</td>
                <td>按钮类型</td>
                <td>String</td>
                <td><span>primary</span>, <span>danger</span>, <span>warning</span>, <span>hollow</span>, <span>disabled</span></td>
                <td>primary</td>
            </tr>
            <tr>
                <td>size</td>
                <td>按钮大小</td>
                <td>String</td>
                <td><span>small</span>, <span>large</span></td>
                <td>small</td>
            </tr>
            <tr>
                <td>bgcolor</td>
                <td>按钮背景颜色</td>
                <td>String && 常规颜色值</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>color</td>
                <td>按钮字体颜色</td>
                <td>String && 常规颜色值</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>disabled</td>
                <td>是否禁用</td>
                <td>Boolean</td>
                <td>-</td>
                <td>false</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        methods: {
            handleClick() {
                alert('Hello World!');
            }
        }
    }
</script>
