<template>
    <docs-layout title="进度条">
        <h2>概述</h2>
        <h3>进度条插件（圈形进度条和线形进度条），采用SVG方式实现，宽高占满父级容器。</h3>

        <h2>按需引入</h2>
        <docs-import>
            <pre class="pre" v-hljs><code class="js">import Vue from 'vue';<br />import {ProgressBar} from 'vue-ydui/dist/lib.rem/progressbar';<br />/* 使用px：import {ProgressBar} from 'vue-ydui/dist/lib.px/progressbar'; */<br /><br />Vue.component(ProgressBar.name, ProgressBar);</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;div style="width: 120px;height: 120px;"&gt;<br />            &lt;yd-progressbar :progress="progress1" trailWidth="4"&gt;{<span>{</span>progress1 * 100<span>}</span>}%&lt;/yd-progressbar&gt;<br />        &lt;/div&gt;<br /><br />        &lt;div style="width: 120px;height: 120px;"&gt;<br />            &lt;yd-progressbar<br />                    :progress="progress2"<br />                    trailWidth="2"<br />                    strokeWidth="4"<br />                    strokeColor="#B2B2B2"<br />                    trailColor="#FE5D51"<br />                    fillColor="#EAEAEA"<br />            &gt;{<span>{</span>progress2 * 100<span>}</span>}%&lt;/yd-progressbar&gt;<br />        &lt;/div&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                progress1: 0.1,<br />                progress2: 0.4<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="width: 100%;overflow: hidden;">
                        <div style="float:left;width: 120px;height: 120px;">
                            <yd-progressbar :progress="progress1" trailWidth="4">{{progress1 * 100}}%</yd-progressbar>
                        </div>
                        <div style="float:left;width: 120px;height: 120px;margin-left: .5rem;">
                            <yd-progressbar :progress="progress2" trailWidth="2" strokeWidth="4" strokeColor="#B2B2B2" trailColor="#FE5D51" fillColor="#EAEAEA">{{progress2 * 100}}%</yd-progressbar>
                        </div>
                    </div>
                </div>
                <div slot="interpre">
                    <p>通过<span>:progress</span>参数设置所占百分比，<span>:progress</span>取值范围为<span>0-1</span>。</p>
                </div>
            </docs-demo>
            <docs-demo title="结合CountUp组件">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;div&gt;<br />        &lt;yd-progressbar :progress="progress3" trailWidth="6"&gt;<br />            &lt;yd-countup :endnum="progress3 * 100" :duration="1" suffix="%"&gt;&lt;/yd-countup&gt;<br />        &lt;/yd-progressbar&gt;<br />    <br />        &lt;yd-button size="large" @click.native="progress3 = 0.8"&gt;设置为80%&lt;/yd-button&gt;<br />    &lt;/div&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                progress3: 0.3<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <div style="width: 100%;overflow: hidden;">
                        <div style="float:left;width: 120px;height: 120px;margin-left: .5rem;">
                            <yd-progressbar :progress="progress3" trailWidth="6">
                                <yd-countup :endnum="progress3 * 100" :duration="1" suffix="%"></yd-countup>
                            </yd-progressbar>
                        </div>
                        <div style="float:left;width: 200px;margin-left: .5rem;padding-top: 50px;">
                            <yd-button size="large" @click.native="progress3 = 0.8">设置为80%</yd-button>
                        </div>
                    </div>
                </div>
                <div slot="interpre">
                    <p>通过<span>yd-countup</span>组件可以使数字动起来，<span>yd-countup</span>组件使用方法请参看<router-link to="/countup">这里</router-link>。</p>
                </div>
            </docs-demo>
            <docs-demo title="线形进度条">
                <pre slot="code" class="pre" v-hljs><code class="html">&lt;template&gt;<br />    &lt;yd-progressbar type="line" :progress="progress4" trailWidth="4" trailColor="#FE5D51"&gt;&lt;/yd-progressbar&gt;<br />&lt;/template&gt;<br /><br />&lt;script type="text/babel"&gt;<br />    export default {<br />        data() {<br />            return {<br />                progress4: 0.6<br />            }<br />        }<br />    }<br />&lt;/script&gt;</code></pre>
                <div slot="demo">
                    <yd-progressbar type="line" :progress="progress4" trailWidth="4" trailColor="#FE5D51"></yd-progressbar>
                </div>
                <div slot="interpre">
                    <p>设置<span>type="line"</span>参数即为线形进度条。</p>
                </div>
            </docs-demo>
        </div>

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

        <h3><strong>yd-progressbar</strong>【props】</h3>
        <docs-table>
            <tr>
                <td>type</td>
                <td>进度条类型</td>
                <td>String</td>
                <td><span>circle</span>,<span>line</span></td>
                <td>circle</td>
            </tr>
            <tr>
                <td>progress</td>
                <td>进度所占百分比（取值范围0-1）</td>
                <td>Float</td>
                <td>-</td>
                <td>0</td>
            </tr>
            <tr>
                <td>fillColor</td>
                <td>进度条背景颜色，线形进度条无效</td>
                <td>String && 常规颜色值</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>strokeWidth</td>
                <td>进度条描边厚度，取值为正数，svg中stroke-width属性值</td>
                <td>Number</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>strokeColor</td>
                <td>进度条颜色</td>
                <td>String && 常规颜色值</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>trailWidth</td>
                <td>高亮进度条描边厚度，不填则取strokeWidth的值</td>
                <td>Number</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>trailColor</td>
                <td>高亮进度条颜色</td>
                <td>String && 常规颜色值</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </docs-table>
    </docs-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                progress1: 0.1,
                progress2: 0.4,
                progress3: 0.3,
                progress4: 0.6,
            }
        }
    }
</script>
