<template>
    <div>
        <van-nav-bar
                title="按钮"
                left-arrow
                @click-left="back"
        />

        <div class="page">
            <ul>
                <li class="section">
                    <h2>按钮</h2>
                    <div class="eg_view">
                        <y-button class='bosco_test' text="bosco" topic="gradient" size="" width="half" loading loading-text="加载中..." font-size="24px" plain></y-button>
                    </div>
                    <div class="eg_useage">
                        <textarea spellcheck="false"><y-button text="bosco" type="correct|error|warn|default"></y-button></textarea>
                    </div>
                    <div class="eg_view">
                        默认：<y-button text="bosco" type="default"></y-button>
                        朴素模式：<y-button text="bosco" type="default" plain></y-button>
                    </div>
                    <div class="eg_view">
                        正确：<y-button text="bosco" type="correct"></y-button>
                        朴素模式：<y-button text="bosco" type="correct" plain></y-button>
                    </div>
                    <div class="eg_view">
                        错误：<y-button text="bosco" type="error"></y-button>
                        朴素模式：<y-button text="bosco" type="error" plain></y-button>
                    </div>
                    <div class="eg_view">
                        提示：<y-button text="bosco" type="warn"></y-button>
                        朴素模式：<y-button text="bosco" type="warn" plain></y-button>
                    </div>
                </li>

                <li class="section">
                    <h2>slot</h2>
                    <div class="eg_view">
                        <y-button text="bosco" type="default">
                            <span>
                                 <i class="topbar_test"></i>
                                slot default
                            </span>
                        </y-button>
                    </div>
                </li>
                <li class="section">
                    <h2>主题</h2>
                    <div class="eg_view">
                        main：<y-button text="bosco" type="correct" topic="main" size="small"></y-button>
                        朴素:<y-button text="bosco" type="correct" topic="main" plain size="small"></y-button>
                    </div>
                    <div class="eg_view">
                        topic：<y-button text="bosco" type="correct" topic="gradient" size="small"></y-button>
                    </div>
                    <div class="eg_view">
                        topic：
                        <y-button text="激活防丢卡" height="48px" width="100%" type="correct" topic="yellow" size="small" radius="round" bold></y-button>
                    </div>
                    <div class="eg_view">
                        topic：
                        <y-button text="暂不领取" height="48px" width="100%" type="correct" topic="lightYellow" size="small" radius="little" bold></y-button>
                    </div>
                    <div class="eg_view">
                        topic-gray：<y-button text="bosco" type="correct" topic="gray" size="small"></y-button>
                        朴素:<y-button text="bosco" type="correct" topic="gray" plain size="small"></y-button>
                    </div>
                </li>
                <li class="section">
                    <h2>圆角</h2>
                    <div class="eg_view">
                        full：<y-button text="bosco" type="correct" topic="gradient" radius="full" loading></y-button>
                    </div>
                    <div class="eg_view">
                        round：<y-button text="bosco" type="correct" topic="gradient" radius="round" loading></y-button>
                    </div>
                    <div class="eg_view">
                        little：<y-button text="bosco" type="correct" topic="gradient" radius="little" loading></y-button>
                    </div>
                </li>
                <li class="section">
                    <h2>按钮特性</h2>
                    <div class="eg_view">
                        加载：<y-button width="100%" text="bosco" topic="gradient" loading-text="" loading></y-button>
                    </div>
                    <div class="eg_view">
                        禁用：<y-button text="bosco" type="correct" disabled></y-button>
                    </div>
                </li>
                <li class="section">
                    <h2>按钮大小</h2>
                    <div class="eg_view">
                        large型：<y-button text="bosco" type="correct" topic="gradient" size="large"></y-button>
                    </div>
                    <div class="eg_view">
                        正常：<y-button text="bosco" type="correct" topic="gradient"></y-button>
                    </div>
                    <div class="eg_view">
                        small型：<y-button text="bosco" type="correct" topic="gradient" size="small"></y-button>
                    </div>
                    <div class="eg_view">
                        mini型：<y-button text="bosco" type="correct" topic="gradient" size="mini"></y-button>
                    </div>
                </li>
            </ul>

        </div>
    </div>
</template>

<script>
    import {NavBar} from 'vant';
    import yButton from '../components/yButton'
    import dayjs from "dayjs";

    window.dayjs = dayjs;


    export default {
        name: "button",
        components: {
            yButton,
            [NavBar.name]:NavBar
        },
        methods:{
            back:()=>{
                window.history.go(-1);
            }
        },
        created(){
            console.log(this.$router)
        }
    }
</script>

<style lang="scss">

</style>
