<template>
  <div class="page-button">
    <!-- <h1 class="page-title">Button</h1> -->
    <co-header fixed title="Button">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper page-content-main co-pd-a08">
      <div class="page-button-group">默认按钮</div>
      <div class="page-button-group">
        <co-button>default</co-button>
        <co-button type="primary">primary</co-button>
        <co-button type="danger">danger</co-button>
        <co-button type="success">success</co-button>
        <co-button type="warning">warning</co-button>
      </div>

      <div class="page-button-group">改变大小</div>
      <div class="page-button-group">size="small"</div>
      <div class="page-button-group">
        <co-button size="small">default</co-button>
        <co-button size="small" type="primary">primary</co-button>
        <co-button size="small" type="danger">danger</co-button>
        <co-button size="small" type="success">success</co-button>
        <co-button size="small" type="warning">warning</co-button>
      </div>

      <div class="page-button-group">size="large"</div>
      <div class="page-button-group">
        <co-button size="large">default</co-button>
        <co-button size="large" type="primary">primary</co-button>
        <co-button size="large" type="danger">danger</co-button>
        <co-button size="large" type="success">success</co-button>
        <co-button size="large" type="warning">warning</co-button>
      </div>
      
      <div class="page-button-group">默认按钮</div>
      <div class="page-button-group">disabled</div>
      <div class="page-button-group">
        <co-button disabled size="large">default</co-button>
        <co-button disabled size="large" type="primary">primary</co-button>
        <co-button disabled size="large" type="danger">danger</co-button>
        <co-button disabled size="large" type="success">success</co-button>
        <co-button disabled size="large" type="warning">warning</co-button>
      </div>

      <div class="page-button-group">幽灵按钮</div>
      <div class="page-button-group">plain</div>
      <div class="page-button-group">
        <co-button plain size="large">default</co-button>
        <co-button plain size="large" type="primary">primary</co-button>
        <co-button plain size="large" type="danger">danger</co-button>
        <co-button plain size="large" type="success">success</co-button>
        <co-button plain size="large" type="warning">warning</co-button>
      </div>

      <div class="page-button-group">带默认图标</div>
      <div class="page-button-group">
        <co-button icon="back">back</co-button>
        <co-button icon="more">更多</co-button>
      </div>

      <div class="page-button-group">自定义图标</div>
      <div class="page-button-group">
        <co-button>
          <img src="../assets/100x100.png" height="20" width="20" slot="icon">
          带自定义图标
        </co-button>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .page-button-group{
    margin-bottom: 15px;
    & > * {
      margin-bottom: 15px;
    }
    .co-button {
        height: 45px;
    }
  }
</style>
