<template>
  <div class="demo-description-response">
    <ui-radio-group
      v-model="layout"
      :options="options"
      type="button">
    </ui-radio-group>
    <br />
    <ui-description
      :layout="layout"
      :column="column">
      <ui-description-item
        label="丰富的组件">
        快速搭建企业级应用
      </ui-description-item>
      <ui-description-item label="友好的接口">
        像Vue一样简单易用
      </ui-description-item>
      <ui-description-item label="更好的性能">
        说出来你可能不信
      </ui-description-item>
      <ui-description-item label="更好的性能">
        说出来你可能不信
      </ui-description-item>
      <ui-description-item
        label="丰富的组件">
        快速搭建企业级应用
      </ui-description-item>
      <ui-description-item label="友好的接口">
        像Vue一样简单易用
      </ui-description-item>
    </ui-description>
  </div>
</template>

<script>
import { RadioGroup, Description, DescriptionItem } from "amumu-ui"
export default {
  components: {
    "ui-radio-group": RadioGroup,
    "ui-description": Description,
    "ui-description-item": DescriptionItem,
  },
  data() {
    return {
      column: {
        xl: 4,
        lg: 4,
        md: 3,
        sm: 2,
        xs: 1,
      },
      layout: "horizontal",
      options: [
        {
          label: "Horizontal",
          value: "horizontal",
        },
        {
          label: "Vertical",
          value: "vertical",
        },
      ],
    }
  },
}
</script>
