<template>
  <div class="demo-space-size">
    <ui-radio-group
      v-model="layout"
      :options="layoutOptions"
      type="button"></ui-radio-group>
    <ui-radio-group
      v-model="size"
      :options="options"
      type="button"></ui-radio-group>
    <ui-space
      :size="size"
      :layout="layout">
      <ui-button>编辑</ui-button>
      <ui-button>删除</ui-button>
      <ui-button>添加</ui-button>
      <ui-tooltip
        content="这是查看按钮"
        placement="bottom">
        <ui-button>查看</ui-button>
      </ui-tooltip>
    </ui-space>
  </div>
</template>

<script>
import { Space, Button, RadioGroup, Tooltip } from "amumu-ui"
export default {
  components: {
    "ui-space": Space,
    "ui-button": Button,
    "ui-radio-group": RadioGroup,
    "ui-tooltip": Tooltip,
  },
  data() {
    return {
      layout: "horizontal",
      layoutOptions: [
        {
          label: "Horizontal",
          value: "horizontal",
        },
        {
          label: "Vertical",
          value: "vertical",
        },
      ],
      size: "default",
      options: [
        {
          label: "Small",
          value: "small",
        },
        {
          label: "Default",
          value: "default",
        },
        {
          label: "Medium",
          value: "medium",
        },
        {
          label: "Large",
          value: "large",
        },
        {
          label: "自定义",
          value: 24,
        }],
    }
  },
}
</script>
<style lang="scss">
.demo-space-size {
  .mm-radio-group {
    margin-bottom: 10px;
  }
}
</style>
