<template>
  <div class="demo-form-layout">
    <ui-form
      :layout="model.layout"
      label-width="80px">
      <ui-form-field>
        <ui-radio-group
          v-model="model.layout"
          :options="layouts"
          type="button"></ui-radio-group>
      </ui-form-field>
      <ui-form-field label="Field A">
        <ui-input></ui-input>
      </ui-form-field>
      <ui-form-field label="Field A">
        <ui-input></ui-input>
      </ui-form-field>
    </ui-form>
  </div>
</template>
<script>
import { Form, FormField, Input, RadioGroup } from "amumu-ui"

export default {
  components: {
    "ui-form": Form,
    "ui-form-field": FormField,
    "ui-input": Input,
    "ui-radio-group": RadioGroup,
  },
  data() {
    return {
      model: {
        layout: "horizontal",
      },
      layouts: [
        {
          label: "Horizontal",
          value: "horizontal",
        },
        {
          label: "Vertical",
          value: "vertical",
        },
        {
          label: "Inline",
          value: "inline",
        },
      ],
    }
  },
}
</script>
