<template>
  <div class="demo-description-layout">
    <ui-radio-group
      v-model="size"
      :options="options"
      type="button">
    </ui-radio-group>
    <br />
    <ui-description
      bordered
      :size="size"
      :label-width="100">
      <template #title>
        有边框水平
        <ui-icon name="emoji"></ui-icon>
      </template>
      <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>
    <br />
    <br />
    <ui-description
      title="有边框垂直"
      bordered
      layout="vertical"
      :size="size">
      <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>

    <br />
    <br />
    <ui-description
      title="无边框水平"
      :size="size">
      <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>
    <br />
    <br />
    <ui-description
      title="无边框垂直"
      layout="vertical"
      :size="size">
      <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>
  </div>
</template>

<script>
import { Icon, RadioGroup, Description, DescriptionItem } from "amumu-ui"

export default {
  components: {
    "ui-radio-group": RadioGroup,
    "ui-description": Description,
    "ui-description-item": DescriptionItem,
    "ui-icon": Icon,
  },
  data() {
    return {
      size: "default",
      options: [
        {
          label: "Large",
          value: "large",
        },
        {
          label: "Default",
          value: "default",
        },
        {
          label: "Medium",
          value: "medium",
        },
        {
          label: "Small",
          value: "small",
        },
      ],
    }
  },
}
</script>
