<template>
  <div class="page">
    <div class="demoName">
      <a class="icon" @click="$router.push({path:'/'})"></a>
      <div class="comp-title">button</div>
    </div>
    <h3>类型、尺寸</h3>
    <h4>默认</h4>
    <WingBlank><ok-button >default</ok-button></WingBlank>
    <h4>禁用</h4>
    <WingBlank><ok-button disabled>default disabled</ok-button></WingBlank>
     <h4>type:ghost</h4>
    <WingBlank><ok-button type="ghost">ghost</ok-button></WingBlank>
    <h4>type:primary</h4>
    <WingBlank><ok-button type="primary">primary</ok-button></WingBlank>
    <h4>type:success</h4>
    <WingBlank><ok-button type="success">success</ok-button></WingBlank>
    <h4>type:warning</h4>
    <WingBlank><ok-button type="warning">warning</ok-button></WingBlank>
    <h4>type:danger</h4>
    <WingBlank><ok-button type="danger">danger</ok-button></WingBlank>
    <h4>加载状态</h4>
    <WingBlank><ok-button loading>Loading</ok-button></WingBlank>
    <h4>自定义图标</h4>
    <WingBlank><ok-button icon="check-circle-o">Custom icon</ok-button></WingBlank>
    <h4>小尺寸</h4>
    <WingBlank><ok-button size="small">Small size</ok-button></WingBlank>
    <h4>行内模式</h4>
    <WingBlank>
      <ok-button icon="check-circle-o" inline>Inline mode</ok-button>
      <ok-button icon="check-circle-o" inline>Inline mode</ok-button>
    </WingBlank>
    <h4>自定义样式</h4>
    <WingBlank><ok-button :btnStyle="btnStyle">Custom Style</ok-button></WingBlank>
  </div>
</template>
<script>
export default {
  name: 'ok-buttons',
  data () {
    return {
      btnStyle: {
        'border-radius': '20px',
        'height': '40px',
        'font-size': '18px',
        'line-height': '40px',
        'color': '#FFFFFF',
        'text-shadow': '0px 1px 2px rgba(0, 0, 0, .1)',
        'border': 'none',
        'background': 'linear-gradient(to right, #03c03c, #fffc00)'
      }
    }
  }
}
</script>