<template>
    <div>
        <Divider>vue-router 3.1 bug</Divider>
        <Button to="/button">跳转到 Button（当前路径）</Button>
        <Button to="/button" replace>跳转到 Button（当前路径, replace）</Button>
        <Divider></Divider>
        <Button icon="logo-github" size="small" shape="circle"></Button>
        <Button icon="logo-github" shape="circle"></Button>
        <Button icon="logo-github" size="large" shape="circle"></Button>

        <Button icon="logo-github" size="small"></Button>
        <Button size="small">EN</Button>

        <Button icon="logo-github"></Button>
        <Button>EN</Button>

        <Button icon="logo-github" size="large"></Button>
        <Button size="large">EN</Button>

        <ButtonGroup size="small">
            <Button icon="logo-github"></Button>
            <Button icon="logo-twitter"></Button>
            <Button>
                EN
            </Button>
        </ButtonGroup>

        <ButtonGroup>
            <Button icon="logo-github"></Button>
            <Button icon="logo-twitter"></Button>
            <Button>
                ENs
            </Button>
        </ButtonGroup>

        <ButtonGroup size="large">
            <Button icon="logo-github"></Button>
            <Button icon="logo-twitter"></Button>
            <Button >
                EN
            </Button>
        </ButtonGroup>
        <br><br><br>
        <Button type="default">Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="info">Info</Button>
        <Button type="success">Success</Button>
        <Button type="warning">Warning</Button>
        <Button type="error">Error</Button>
        <Button type="text">Text</Button>
        <br><br><br>
        <Button type="default" disabled>Default</Button>
        <Button type="primary" disabled>Primary</Button>
        <Button type="dashed" disabled>Dashed</Button>
        <Button type="info" disabled>Info</Button>
        <Button type="success" disabled>Success</Button>
        <Button type="warning" disabled>Warning</Button>
        <Button type="error" disabled>Error</Button>
        <Button type="text" disabled>Text</Button>
        <br><br><br>
        <div style="padding: 20px;background: rgb(190, 200, 200)">
            <Button type="default" ghost>Default</Button>
            <Button type="primary" ghost>Primary</Button>
            <Button type="dashed" ghost>Dashed</Button>
            <Button type="info" ghost>Info</Button>
            <Button type="success" ghost>Success</Button>
            <Button type="warning" ghost>Warning</Button>
            <Button type="error" ghost>Error</Button>
            <Button type="text" ghost>Text</Button>
            <br><br><br>
            <Button type="default" ghost disabled>Default</Button>
            <Button type="primary" ghost disabled>Primary</Button>
            <Button type="dashed" ghost disabled>Dashed</Button>
            <Button type="info" ghost disabled>Info</Button>
            <Button type="success" ghost disabled>Success</Button>
            <Button type="warning" ghost disabled>Warning</Button>
            <Button type="error" ghost disabled>Error</Button>
            <Button type="text" ghost disabled>Text</Button>
        </div>
        <Divider></Divider>
        <Button type="primary">普通按钮</Button>
        <Button type="primary" to="/">普通按钮</Button>
        <Button type="primary" size="small">普通按钮</Button>
        <Button type="primary" to="/" size="small">普通按钮</Button>
        <Button type="primary" size="large">普通按钮</Button>
        <Button type="primary" to="/" size="large">普通按钮</Button>
        <Button type="primary" size="large" shape="circle">普通按钮</Button>
        <Button type="primary" to="/" size="large" shape="circle">普通按钮</Button>
        <br><br><br>
        <Button type="primary" icon="ios-information-circle" size="small">Search</Button>
        <Button type="primary" icon="ios-information-circle" size="default">Search</Button>
        <Button type="primary" icon="ios-information-circle" size="large">Search</Button>
        <br><br><br>
        <Button @click="hc">Open Menu2</Button>
        <Button to="/menu" @click="hc">Open Menu2</Button>
        <Button to="/menu" replace>Open Menu Replace</Button>
        <Button to="//iviewui.com" target="_blank">Open iView</Button>
        <hr>
        <Button @click="hc">链接按钮</Button>
        <Button to="/menu" @click="hc">链接按钮</Button>
        <hr>
        <Icon custom="i-icon i-icon-search" />
        <Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />
        <Icon custom="i-icon i-icon-time" />
        <Icon type="ionic" />
        <Button icon="ionic">Default</Button>
        <Button custom-icon="i-icon i-icon-search">Default</Button>
        <Button icon="ionic" shape="circle"></Button>
        <Button custom-icon="i-icon i-icon-video" shape="circle"></Button>
        <hr>
        <Button>Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="default">Ghost</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="text">Text</Button>
        <br><br>
        <Button type="info">Info</Button>
        <Button type="success">Success</Button>
        <Button type="warning">Warning</Button>
        <Button type="error">Error</Button>
        <br><br>
        <Button type="primary" shape="circle" icon="ios-search"></Button>
        <Button type="primary" icon="ios-search">Search</Button>
        <Button type="primary" shape="circle" icon="ios-search">Search</Button>
        <Button type="primary" shape="circle">Circle</Button>
        <br><br>
        <Button type="default" shape="circle" icon="ios-search"></Button>
        <Button type="default" icon="ios-search">Search</Button>
        <Button type="default" shape="circle" icon="ios-search">Search</Button>
        <Button type="default" shape="circle">Circle</Button>
        <br><br>
        <Button>Default</Button>
        <Button disabled>Default(Disabled)</Button>
        <br>
        <Button type="primary">Primary</Button>
        <Button type="primary" disabled>Primary(Disabled)</Button>
        <br>
        <Button type="default">Ghost</Button>
        <Button type="default" disabled>Ghost(Disabled)</Button>
        <br>
        <Button type="dashed">Dashed</Button>
        <Button type="dashed" disabled>Dashed(Disabled)</Button>
        <br>
        <Button type="text">Text</Button>
        <Button type="text" disabled>Text(Disabled)</Button>
        <br><br>

        <br><br>
        <h4>基本</h4>
        <br><br>
        <Button-group>
            <Button>取消</Button>
            <Button type="primary">确定</Button>
        </Button-group>
        <Button-group>
            <Button disabled>昨日</Button>
            <Button disabled>今日</Button>
            <Button disabled>明日</Button>
        </Button-group>
        <Button-group>
            <Button type="primary">L</Button>
            <Button>M</Button>
            <Button type="default">M</Button>
            <Button type="dashed">R</Button>
        </Button-group>
        <br><br>
        <h4>配合图标</h4>
        <br><br>
        <Button-group>
            <Button type="primary">
                <Icon type="chevron-left"></Icon>
                前进
            </Button>
            <Button type="primary">
                后退
                <Icon type="chevron-right"></Icon>
            </Button>
        </Button-group>
        <Button-group>
            <Button type="primary" icon="ios-skip-backward"></Button>
            <Button type="primary" icon="ios-skip-forward"></Button>
        </Button-group>
        <Button-group>
            <Button type="default" icon="ios-color-wand-outline"></Button>
            <Button type="default" icon="ios-sunny-outline"></Button>
            <Button type="default" icon="ios-crop"></Button>
            <Button type="default" icon="ios-color-filter-outline"></Button>
        </Button-group>
        <br><br>
        <h4>圆角</h4>
        <br><br>
        <Button-group shape="circle">
            <Button type="primary">
                <Icon type="chevron-left"></Icon>
                前进
            </Button>
            <Button type="primary">
                后退
                <Icon type="chevron-right"></Icon>
            </Button>
        </Button-group>
        <Button-group shape="circle">
            <Button type="primary" icon="ios-skip-backward"></Button>
            <Button type="primary" icon="ios-skip-forward"></Button>
        </Button-group>
        <Button-group shape="circle">
            <Button type="default" icon="ios-color-wand-outline"></Button>
            <Button type="default" icon="ios-sunny-outline"></Button>
            <Button type="default" icon="ios-crop"></Button>
            <Button type="default" icon="ios-color-filter-outline"></Button>
        </Button-group>
        <br><br>
        <h4>尺寸</h4>
        <br><br>
        <Button-group size="large">
            <Button type="default">Large</Button>
            <Button type="default">Large</Button>
        </Button-group>
        <Button-group size="large">
            <Button type="default">大汉字</Button>
            <Button type="default">大汉字</Button>
        </Button-group>
        <Button-group>
            <Button type="default">Default</Button>
            <Button type="default">Default</Button>
        </Button-group>
        <Button-group size="small">
            <Button type="default">Small</Button>
            <Button type="default">Small</Button>
        </Button-group>
        <br><br>
        <Button-group size="large" shape="circle">
            <Button type="default">Large</Button>
            <Button type="default">Large</Button>
        </Button-group>
        <Button-group shape="circle">
            <Button type="default">Default</Button>
            <Button type="default">Default</Button>
        </Button-group>
        <Button-group size="small" shape="circle">
            <Button type="default">Small</Button>
            <Button type="default">Small</Button>
        </Button-group>

        <br><br>
        <Button to="/icon">Open New Window</Button>
        <br><br><br>
        <ButtonGroup vertical size="small">
            <Button icon="logo-facebook"></Button>
            <Button icon="logo-twitter"></Button>
            <Button icon="logo-googleplus"></Button>
            <Button icon="logo-tumblr"></Button>
        </ButtonGroup>
        <ButtonGroup vertical>
            <Button icon="logo-facebook"></Button>
            <Button icon="logo-twitter"></Button>
            <Button icon="logo-googleplus"></Button>
            <Button icon="logo-tumblr"></Button>
        </ButtonGroup>
        <ButtonGroup vertical size="large">
            <Button icon="logo-facebook"></Button>
            <Button icon="logo-twitter"></Button>
            <Button icon="logo-googleplus"></Button>
            <Button icon="logo-tumblr"></Button>
        </ButtonGroup>
        <br><br>
        <Button>
            <Icon type="md-alert" />
            左右图标
            <Icon type="ios-aperture" />
        </Button>
        <Button>
            左右图标
            <Icon type="ios-aperture" />
        </Button>
        <Button>
            <Icon type="md-alert" />
            左右图标
        </Button>
        <Button icon="md-alert">
            左右图标
        </Button>
        <Divider></Divider>
        <div>
            <RadioGroup v-model="buttonSize" type="button">
                <Radio label="large">Large</Radio>
                <Radio label="default">Default</Radio>
                <Radio label="small">small</Radio>
            </RadioGroup>
            <br><br>
            <Button :size="buttonSize" type="primary">Primary</Button>
            <Button :size="buttonSize" type="default">Default</Button>
            <Button :size="buttonSize" type="dashed">Dashed</Button>
            <Button :size="buttonSize" type="text">Text</Button>
            <br><br>
            <Button :size="buttonSize" icon="md-download" type="primary" shape="circle"></Button>
            <Button :size="buttonSize" icon="md-download" type="primary">Download</Button>
            <br><br>
            <ButtonGroup :size="buttonSize">
                <Button :size="buttonSize" type="primary">
                    <Icon type="ios-arrow-back" />
                    Backward
                </Button>
                <Button :size="buttonSize" type="primary">
                    Forward
                    <Icon type="ios-arrow-forward" />
                </Button>
            </ButtonGroup>
        </div>
        <Divider></Divider>
        <Button to="http://baidu.com">http跳转</Button>
        <Button to="http://baidu.com" target="_blank">http跳转(_blank)</Button>
        <Button to="https://iviewui.com" replace>https跳转</Button>
        <Button :to="{path: '/icon'}">Router 对象跳转</Button>
        <Button :to="{path: '/icon'}" target="_blank">Router 对象跳转(_blank)</Button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                buttonSize: 'large'
            }
        },
        methods: {
            hc (data) {
                console.log(data);
            }
        }
    }
</script>
<style>
    @font-face {
        font-family: "iconfont";
        src: url('data:application/x-font-woff;charset=utf-8;base64, ') format('woff');
    }
    .i-icon {
        display: inline-block;
        font-family: 'iconfont';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .i-icon-accessory:before { content: "\e6dd"; }

    .i-icon-activity:before { content: "\e6de"; }

    .i-icon-activity_fill:before { content: "\e6df"; }

    .i-icon-add:before { content: "\e6e0"; }

    .i-icon-addressbook_fill:before { content: "\e6e2"; }

    .i-icon-addressbook:before { content: "\e6e3"; }

    .i-icon-barrage_fill:before { content: "\e6e4"; }

    .i-icon-barrage:before { content: "\e6e5"; }

    .i-icon-browse_fill:before { content: "\e6e6"; }

    .i-icon-browse:before { content: "\e6e7"; }

    .i-icon-brush:before { content: "\e6e8"; }

    .i-icon-brush_fill:before { content: "\e6e9"; }

    .i-icon-businesscard_fill:before { content: "\e6ea"; }

    .i-icon-businesscard:before { content: "\e6eb"; }

    .i-icon-camera_fill:before { content: "\e6ec"; }

    .i-icon-camera:before { content: "\e6ed"; }

    .i-icon-clock_fill:before { content: "\e6ee"; }

    .i-icon-clock:before { content: "\e6ef"; }

    .i-icon-close:before { content: "\e6f0"; }

    .i-icon-collection_fill:before { content: "\e6f1"; }

    .i-icon-collection:before { content: "\e6f2"; }

    .i-icon-computer_fill:before { content: "\e6f3"; }

    .i-icon-computer:before { content: "\e6f4"; }

    .i-icon-coordinates_fill:before { content: "\e6f5"; }

    .i-icon-coordinates:before { content: "\e6f6"; }

    .i-icon-coupons_fill:before { content: "\e6f7"; }

    .i-icon-coupons:before { content: "\e6f8"; }

    .i-icon-createtask_fill:before { content: "\e6f9"; }

    .i-icon-createtask:before { content: "\e6fa"; }

    .i-icon-customerservice_fill:before { content: "\e6fb"; }

    .i-icon-customerservice:before { content: "\e6fc"; }

    .i-icon-delete_fill:before { content: "\e6fd"; }

    .i-icon-delete:before { content: "\e6fe"; }

    .i-icon-document:before { content: "\e6ff"; }

    .i-icon-document_fill:before { content: "\e700"; }

    .i-icon-dynamic_fill:before { content: "\e701"; }

    .i-icon-dynamic:before { content: "\e702"; }

    .i-icon-editor:before { content: "\e703"; }

    .i-icon-eit:before { content: "\e704"; }

    .i-icon-emoji_fill:before { content: "\e705"; }

    .i-icon-emoji:before { content: "\e706"; }

    .i-icon-enter:before { content: "\e707"; }

    .i-icon-enterinto:before { content: "\e708"; }

    .i-icon-enterinto_fill:before { content: "\e709"; }

    .i-icon-feedback_fill:before { content: "\e70a"; }

    .i-icon-feedback:before { content: "\e70b"; }

    .i-icon-flag_fill:before { content: "\e70c"; }

    .i-icon-flag:before { content: "\e70d"; }

    .i-icon-flashlight:before { content: "\e70e"; }

    .i-icon-flashlight_fill:before { content: "\e70f"; }

    .i-icon-fullscreen:before { content: "\e710"; }

    .i-icon-group:before { content: "\e711"; }

    .i-icon-group_fill:before { content: "\e712"; }

    .i-icon-homepage_fill:before { content: "\e713"; }

    .i-icon-homepage:before { content: "\e714"; }

    .i-icon-integral_fill:before { content: "\e715"; }

    .i-icon-integral:before { content: "\e716"; }

    .i-icon-interactive_fill:before { content: "\e717"; }

    .i-icon-interactive:before { content: "\e718"; }

    .i-icon-keyboard:before { content: "\e719"; }

    .i-icon-label:before { content: "\e71a"; }

    .i-icon-label_fill:before { content: "\e71b"; }

    .i-icon-like_fill:before { content: "\e71c"; }

    .i-icon-like:before { content: "\e71d"; }

    .i-icon-live_fill:before { content: "\e71e"; }

    .i-icon-live:before { content: "\e71f"; }

    .i-icon-lock_fill:before { content: "\e720"; }

    .i-icon-lock:before { content: "\e721"; }

    .i-icon-mail:before { content: "\e722"; }

    .i-icon-mail_fill:before { content: "\e723"; }

    .i-icon-message:before { content: "\e724"; }

    .i-icon-message_fill:before { content: "\e725"; }

    .i-icon-mine:before { content: "\e726"; }

    .i-icon-mine_fill:before { content: "\e727"; }

    .i-icon-mobilephone_fill:before { content: "\e728"; }

    .i-icon-mobilephone:before { content: "\e729"; }

    .i-icon-more:before { content: "\e72a"; }

    .i-icon-narrow:before { content: "\e72b"; }

    .i-icon-offline_fill:before { content: "\e72c"; }

    .i-icon-offline:before { content: "\e72d"; }

    .i-icon-other:before { content: "\e72e"; }

    .i-icon-picture_fill:before { content: "\e72f"; }

    .i-icon-picture:before { content: "\e730"; }

    .i-icon-play:before { content: "\e731"; }

    .i-icon-play_fill:before { content: "\e732"; }

    .i-icon-playon_fill:before { content: "\e733"; }

    .i-icon-playon:before { content: "\e734"; }

    .i-icon-praise_fill:before { content: "\e735"; }

    .i-icon-praise:before { content: "\e736"; }

    .i-icon-prompt_fill:before { content: "\e737"; }

    .i-icon-prompt:before { content: "\e738"; }

    .i-icon-redpacket_fill:before { content: "\e739"; }

    .i-icon-redpacket:before { content: "\e73a"; }

    .i-icon-refresh:before { content: "\e73b"; }

    .i-icon-remind_fill:before { content: "\e73c"; }

    .i-icon-remind:before { content: "\e73d"; }

    .i-icon-return:before { content: "\e73e"; }

    .i-icon-right:before { content: "\e73f"; }

    .i-icon-scan:before { content: "\e740"; }

    .i-icon-send:before { content: "\e741"; }

    .i-icon-service_fill:before { content: "\e742"; }

    .i-icon-service:before { content: "\e743"; }

    .i-icon-setup_fill:before { content: "\e744"; }

    .i-icon-setup:before { content: "\e745"; }

    .i-icon-share_fill:before { content: "\e746"; }

    .i-icon-share:before { content: "\e747"; }

    .i-icon-success_fill:before { content: "\e748"; }

    .i-icon-success:before { content: "\e749"; }

    .i-icon-suspend:before { content: "\e74a"; }

    .i-icon-switch:before { content: "\e74b"; }

    .i-icon-systemprompt_fill:before { content: "\e74c"; }

    .i-icon-systemprompt:before { content: "\e74d"; }

    .i-icon-tailor:before { content: "\e74e"; }

    .i-icon-task:before { content: "\e74f"; }

    .i-icon-task_fill:before { content: "\e750"; }

    .i-icon-tasklist_fill:before { content: "\e751"; }

    .i-icon-tasklist:before { content: "\e752"; }

    .i-icon-time_fill:before { content: "\e753"; }

    .i-icon-time:before { content: "\e754"; }

    .i-icon-translation_fill:before { content: "\e755"; }

    .i-icon-translation:before { content: "\e756"; }

    .i-icon-trash:before { content: "\e757"; }

    .i-icon-trash_fill:before { content: "\e758"; }

    .i-icon-undo:before { content: "\e759"; }

    .i-icon-video:before { content: "\e75a"; }

    .i-icon-video_fill:before { content: "\e75b"; }

    .i-icon-warning_fill:before { content: "\e75c"; }

    .i-icon-warning:before { content: "\e75d"; }

    .i-icon-search:before { content: "\e75e"; }

    .i-icon-searchfill:before { content: "\e75f"; }

    .i-icon-publishgoods_fill:before { content: "\e760"; }

    .i-icon-shop_fill:before { content: "\e761"; }

    .i-icon-transaction_fill:before { content: "\e762"; }

    .i-icon-packup:before { content: "\e763"; }

    .i-icon-unfold:before { content: "\e764"; }

    .i-icon-financial_fill:before { content: "\e765"; }

    .i-icon-commodity:before { content: "\e766"; }
</style>
