组件
RadioGroup
显示一组单选按钮。
用法
使用 v-model 使 RadioGroup 具有响应性。
<script setup lang="ts">
const options = [{
value: 'email',
label: 'Email'
}, {
value: 'sms',
label: 'Phone (SMS)'
}, {
value: 'push',
label: 'Push notification'
}]
const selected = ref('sms')
</script>
<template>
<URadioGroup v-model="selected" legend="Choose something" :options="options" />
</template>
或者，您可以使用单独的 Radio 组件
<script setup lang="ts">
const methods = [
{ value: 'email', label: 'Email' },
{ value: 'sms', label: 'Phone (SMS)' },
{ value: 'push', label: 'Push notification' }
]
const selected = ref('sms')
</script>
<template>
<div class="space-y-1">
<URadio v-for="method of methods" :key="method.value" v-model="selected" v-bind="method" />
</div>
</template>
如果使用 RadioGroup 组件，您可以使用
uiRadio 属性自定义 Radio 选项。图例
使用 legend 属性为 RadioGroup 添加图例。
<template>
<URadioGroup
legend="Legend"
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"
model-value="sms"
/>
</template>
样式
使用 color 属性更改 RadioGroup 的样式。
<template>
<URadioGroup
color="primary"
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"
model-value="sms"
/>
</template>
此属性也适用于 Radio 组件。
禁用
使用 disabled 属性禁用 RadioGroup。
<template>
<URadioGroup
disabled
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification', disabled: true }]"
model-value="sms"
/>
</template>
此属性也适用于 Radio 组件，您可以在
options 中设置 disabled 字段来禁用特定的 Radio。标签
使用 label 属性在 Radio 右侧显示标签。
<template>
<URadio label="Label" />
</template>
必填
使用 required 属性在 Radio 标签旁边显示一个红色的星号。
<template>
<URadio label="Label" required />
</template>
帮助
使用 help 属性在 Radio 下面显示一些文本。
请选择一个
<template>
<URadio label="Label" help="Please choose one" />
</template>
插槽
标签
使用 #label 插槽覆盖每个选项的标签。
<script setup lang="ts">
const options = [
{ value: 'email', label: 'Email', icon: 'i-heroicons-at-symbol' },
{ value: 'sms', label: 'Phone (SMS)', icon: 'i-heroicons-phone' },
{ value: 'push', label: 'Push notification', icon: 'i-heroicons-bell' }
]
const selected = ref('sms')
</script>
<template>
<URadioGroup v-model="selected" :options="options">
<template #label="{ option }">
<p class="italic">
<UIcon :name="option.icon" />
{{ option.label }}
</p>
</template>
</URadioGroup>
</template>
或者，您可以使用单独的 Radio 组件进行相同的操作
<template>
<URadio>
<template #label>
<span class="italic">Label</span>
</template>
</URadio>
</template>
帮助
与 #label 插槽类似，使用 #help 插槽覆盖帮助文本的内容。
图例
使用 #legend 插槽覆盖图例的内容。
<template>
<URadioGroup
:options="[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'Phone (SMS)' }, { value: 'push', label: 'Push notification' }]"
model-value="sms"
>
<template #legend>
<span class="italic">Legend</span>
</template>
</URadioGroup>
</template>
属性
name
字符串
空value
字符串 | 数字 | 布尔值
空标签
字符串
空颜色
字符串
config.default.colorui
{ wrapper?: string; container?: string; base?: string; form?: string; color?: string; background?: string; border?: string; ring?: string; inner?: string; label?: string; required?: string; help?: string; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}帮助
字符串
空id
字符串
空modelValue
字符串 | 数字 | 布尔值 | 对象
空inputClass
字符串
空必填
布尔值
false禁用
布尔值
false配置
使用
ui 属性覆盖单选组配置，使用 uiRadio 属性覆盖单选配置。{
wrapper: 'relative flex items-start',
container: 'flex items-center h-5',
base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
form: 'form-radio',
color: 'text-{color}-500 dark:text-{color}-400',
background: 'bg-white dark:bg-gray-900',
border: 'border border-gray-300 dark:border-gray-700',
ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
inner: 'ms-3 flex flex-col',
label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
required: 'text-sm text-red-500 dark:text-red-400',
help: 'text-sm text-gray-500 dark:text-gray-400',
default: {
color: 'primary'
}
}