<template>
  <div>
    <p class="demo-title">
      默认用法
    </p>
    <div style="padding:0 20px;background:#fff">
      <bxs-radio-group v-model="radio1">
        <bxs-radio name="1">
          1
        </bxs-radio>
        <bxs-radio name="2">
          2
        </bxs-radio>
      </bxs-radio-group>

      <bxs-radio-group
        v-model="radio2"
        select-color="minor"
        >
        <bxs-radio
          name="1"
          label-position="left"
          >
          1
        </bxs-radio>
        <bxs-radio
          name="2"
          label-position="left"
          >
          2
        </bxs-radio>
        <bxs-radio
          name="3"
          label-position="left"
          >
          3
        </bxs-radio>
      </bxs-radio-group>
    </div>
    <p class="demo-title">
      disabled相关
    </p>
    <div style="padding:0 20px;background:#fff">
      <bxs-radio-group
        disabled
        v-model="sex1"
        >
        <bxs-radio
          name="1"
          >
          男
        </bxs-radio>
        <bxs-radio name="2">
          女
        </bxs-radio>
      </bxs-radio-group>

      <bxs-radio-group v-model="sex2">
        <bxs-radio
          disabled
          name="3"
          >
          男（disabled）
        </bxs-radio>
        <bxs-radio name="4">
          女
        </bxs-radio>
      </bxs-radio-group>

      <bxs-radio-group v-model="sex3">
        <bxs-radio
          label-disabled
          name="5"
          >
          男（labelDisabled）
        </bxs-radio>
        <bxs-radio name="6">
          女
        </bxs-radio>
      </bxs-radio-group>
    </div>

    <p class="demo-title">
      与button搭配使用
    </p>
    <div style="padding:0 20px;background:#fff">
      <bxs-radio-group
        v-model="radio3"
        select-color="minor"
        >
        <bxs-radio
          type="button"
          name="1"
          label-position="left"
          >
          1
        </bxs-radio>
        <bxs-radio
          type="button"
          name="2"
          label-position="left"
          >
          2
        </bxs-radio>
      </bxs-radio-group>
    </div>
    <p class="demo-title">
      与cell搭配使用
    </p>

    <div style="padding:0 20px;font-size:16px">
      未完待续...
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sex1: '1',
      sex2: '3',
      sex3: '5',
      radio1: '1',
      radio2: '1',
      radio3: '1',
    }
  },
}
</script>
<style>
p {
  font-size: 16px;
  line-height: 30px;
  text-indent: 10px;
  font-weight: 500;
}
</style>
