<template>
  <div class="demo-button-group-base">
    <hive-button-group>
      <hive-button>按钮1</hive-button>
      <hive-button>按钮2</hive-button>
      <hive-button>按钮3</hive-button>
    </hive-button-group>
    <hive-button-group>
      <hive-button theme="primary">
        按钮1
      </hive-button>
      <hive-button>按钮2</hive-button>
      <hive-button>按钮3</hive-button>
    </hive-button-group>
    <div>
      <hive-button-group size="large">
        <hive-button theme="primary">
          按钮1
        </hive-button>
        <hive-button>按钮2</hive-button>
        <hive-button>按钮3</hive-button>
      </hive-button-group>
      <hive-button-group disabled>
        <hive-button theme="primary">
          按钮1
        </hive-button>
        <hive-button>按钮2</hive-button>
        <hive-button>按钮3</hive-button>
      </hive-button-group>
    </div>
    <hive-button-group
      style="width:400px;"
      block
    >
      <hive-button theme="primary">
        按钮1
      </hive-button>
      <hive-button>按钮2</hive-button>
      <hive-button>按钮3</hive-button>
    </hive-button-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: ['按钮1', '按钮2', '按钮3']
    };
  }
};
</script>
