<template>
  <div class="demo-space-align">
    <ui-radio-group
      v-model="align"
      :options="options"
      type="button"></ui-radio-group>
    <ui-space :align="align">
      <div>text</div>
      <ui-button>添加</ui-button>
      <div class="block">
        block
      </div>
    </ui-space>
  </div>
</template>

<script>
import { Space, Button, RadioGroup } from "amumu-ui"
export default {
  components: {
    "ui-space": Space,
    "ui-button": Button,
    "ui-radio-group": RadioGroup,
  },
  data() {
    return {
      align: "stretch",
      options: [
        {
          label: "Stretch",
          value: "stretch",
        },
        {
          label: "Start",
          value: "start",
        },
        {
          label: "Baseline",
          value: "baseline",
        },
        {
          label: "Center",
          value: "center",
        },
        {
          label: "End",
          value: "end",
        },
      ],
    }
  },
}
</script>
<style lang="scss">
.demo-space-align {
  .mm-radio-group {
    margin-bottom: 10px;
  }
  .mm-space{
    border: 1px solid #e6e6e6;
    padding: 5px;
  }
  .block{
    border: 1px solid #e6e6e6;
    padding: 32px 22px;
  }
}
</style>
