<template>
  <demo-section>
    <demo-block title="常规">
      <div class="demo-button-row">
        <drip-button type="blue">蓝色</drip-button>
        <drip-button type="orange">橘色按钮</drip-button>
        <drip-button type="green">绿色按钮</drip-button>
        <drip-button type="default">默认按钮</drip-button>
      </div>
    </demo-block>

    <demo-block title="简约">
      <div class="demo-button-row">
        <drip-button plain type="blue">蓝色</drip-button>
        <drip-button plain type="orange">橘色按钮</drip-button>
        <drip-button plain type="green">绿色按钮</drip-button>
      </div>
    </demo-block>

    <demo-block title="禁用">
      <div class="demo-button-row">
        <drip-button disabled type="blue">蓝色</drip-button>
        <drip-button disabled type="orange">橘色按钮</drip-button>
        <drip-button disabled type="green">绿色按钮</drip-button>
      </div>
    </demo-block>

    <demo-block title="加载中">
      <div class="demo-button-row">
        <drip-button loading type="blue">蓝色</drip-button>
        <drip-button loading type="orange">橘色按钮</drip-button>
        <drip-button loading type="green">绿色按钮</drip-button>
      </div>
    </demo-block>

    <demo-block title="形状">
      <drip-button square type="default">默认按钮</drip-button>
      <drip-button round type="blue">蓝色</drip-button>
    </demo-block>

    <demo-block title="大小">
      <drip-button size="large" type="green">大按钮</drip-button>
      <drip-button size="normal" type="blue">正常按钮</drip-button>
      <drip-button size="small">小按钮</drip-button>
    </demo-block>

  </demo-section>
</template>

<style lang="postcss">
.demo-button {
  .drip-button {
    user-select: none;

    &--large {
      margin-bottom: 15px;
    }

    &--small,
    &--normal:not(:last-child) {
      margin-right: 10px;
    }

    .drip-loading {
      margin: 0 18px;
    }
  }

  .van-doc-demo-block {
    padding: 0 15px;
  }

  .vant-doc-demo-block__title {
    padding-left: 0;
  }

  &-row {
    margin-bottom: 10px;
  }
}
</style>
