TUI

<template>
  <div class="component-card-demo-wrap">
    <TsRadio v-model="radioValue" value="1">选项1</TsRadio>
    <TsRadio v-model="radioValue" value="2">选项2</TsRadio>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsRadio } from 'tui';

const radioValue = ref('1');
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsRadio v-model="radioValue2" value="1" disabled>禁用</TsRadio>
    <TsRadio v-model="radioValue2" value="2" disabled>选中且禁用</TsRadio>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsRadio } from 'tui';

const radioValue2 = ref('2');
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsRadioGroup v-model="radioGroup" :radioGaps="[22, 12]">
      <TsRadio value="1">选项1</TsRadio>
      <TsRadio value="2">选项2</TsRadio>
      <TsRadio value="3">选项3</TsRadio>
    </TsRadioGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsRadio, TsRadioGroup } from 'tui';

const radioGroup = ref('1');
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsRadioGroup v-model="radioButton">
      <TsRadioButton value="1">选项1</TsRadioButton>
      <TsRadioButton value="2">选项2</TsRadioButton>
      <TsRadioButton value="3" disabled>选项3</TsRadioButton>
    </TsRadioGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsRadioButton, TsRadioGroup } from 'tui';

const radioButton = ref('1');
</script>

<template>
  <div class="component-card-demo-column">
    <TsRadioGroup v-model="radioFillButton" :options="radioGroupOptions" fill="#0d8ef7" optionType="button" size="small"></TsRadioGroup>
    <TsRadioGroup v-model="radioFillButton" :options="radioGroupOptions" fill="linear-gradient(135deg, #6c5ce7, #9b59b6)" fillBorderColor="#9b59b6" optionType="button" size="small"></TsRadioGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsRadioGroup } from 'tui';

const radioFillButton = ref('北京');
const radioGroupOptions = [
  {
    label: '北京',
    value: '北京',
  },
  {
    label: '广州',
    value: '广州',
  },
  {
    label: '上海',
    value: '上海',
  },
  {
    label: '重庆',
    value: '重庆',
  },
];
</script>

<template>
  <div class="component-card-demo-column">
    <TsRadioGroup v-model="radioTypeButton" :options="radioGroupOptions" optionType="button" size="small"></TsRadioGroup>
    <TsRadioGroup v-model="radioTypeButton" :options="radioGroupOptions" optionType="button"></TsRadioGroup>
    <TsRadioGroup v-model="radioTypeButton" :options="radioGroupOptions" optionType="button" size="large"></TsRadioGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsRadioGroup } from 'tui';

const radioTypeButton = ref('北京');
const radioGroupOptions = [
  {
    label: '北京',
    value: '北京',
  },
  {
    label: '广州',
    value: '广州',
  },
  {
    label: '上海',
    value: '上海',
  },
  {
    label: '重庆',
    value: '重庆',
  },
];
</script>