<template>
  <div>
    <div class="demo-title">
      按钮type
    </div>
    <div class="demo-content">
      <bxs-button>primary</bxs-button>
      <bxs-button type="minor">
        minor
      </bxs-button>
      <bxs-button type="assist">
        assist
      </bxs-button>
    </div>
    <div class="demo-title">
      按钮disabled
    </div>
    <div class="demo-content">
      <bxs-button disabled>
        primary
      </bxs-button>
      <bxs-button
        type="minor"
        disabled
        >
        minor
      </bxs-button>
      <bxs-button
        type="assist"
        disabled
        >
        assist
      </bxs-button>
    </div>
    <div class="demo-title">
      按钮plain
    </div>
    <div class="demo-content">
      <bxs-button plain>
        primary
      </bxs-button>
      <bxs-button
        type="minor"
        plain
        >
        minor
      </bxs-button>
      <bxs-button
        type="assist"
        plain
        >
        assist
      </bxs-button>
      <bxs-button
        plain
        disabled
        >
        primary
      </bxs-button>
      <bxs-button
        type="minor"
        plain
        disabled
        >
        minor
      </bxs-button>
      <bxs-button
        type="assist"
        plain
        disabled
        >
        assist
      </bxs-button>
    </div>
    <div class="demo-title">
      按钮size
    </div>
    <div class="demo-content">
      <bxs-button size="large">
        large
      </bxs-button>
      <bxs-button size="middle">
        middle
      </bxs-button>
      <bxs-button size="normal">
        normal
      </bxs-button>
      <bxs-button size="small">
        small
      </bxs-button>
      <bxs-button size="mini">
        mini
      </bxs-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'button-demo',
}
</script>
<style lang="postcss">
.demo-title {
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}
.demo-content {
  padding: 0 15px;
  & .bx-button {
    margin: 5px;
    user-select: none;
    &--large {
      margin-bottom: 15px;
    }
    &--small,
    &--middle,
    &--mini,
    &--normal:not(:last-child) {
      margin-right: 10px;
    }
  }
}
</style>
