使用 v-model 指令来控制 RadioGroup 的值，或者在不需要控制其状态时，使用 default-value 属性来设置初始值。
使用 items 属性作为字符串或数字数组。
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref('System')
</script>
<template>
<URadioGroup v-model="value" :items="items" />
</template>
您还可以传入一个包含以下属性的对象数组
label?: stringdescription?: stringvalue?: stringdisabled?: booleanclass?: anyui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue label?: ClassNameValue, description?: ClassNameValue }<script setup lang="ts">
import type { RadioGroupItem } from '@nuxt/ui'
const items = ref<RadioGroupItem[]>([
{
label: 'System',
description: 'This is the first option.',
value: 'system'
},
{
label: 'Light',
description: 'This is the second option.',
value: 'light'
},
{
label: 'Dark',
description: 'This is the third option.',
value: 'dark'
}
])
const value = ref('system')
</script>
<template>
<URadioGroup v-model="value" :items="items" />
</template>
v-model 指令或 default-value 属性中引用对象的 value 属性。你可以通过使用 value-key 属性来更改用于设置值的属性。默认为 value。
<script setup lang="ts">
import type { RadioGroupItem } from '@nuxt/ui'
const items = ref<RadioGroupItem[]>([
{
label: 'System',
description: 'This is the first option.',
id: 'system'
},
{
label: 'Light',
description: 'This is the second option.',
id: 'light'
},
{
label: 'Dark',
description: 'This is the third option.',
id: 'dark'
}
])
const value = ref('light')
</script>
<template>
<URadioGroup v-model="value" value-key="id" :items="items" />
</template>
使用 legend 属性设置 RadioGroup 的图例。
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<URadioGroup legend="Theme" default-value="System" :items="items" />
</template>
使用 color 属性更改 RadioGroup 的颜色。
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<URadioGroup color="neutral" default-value="System" :items="items" />
</template>
使用 variant 属性更改 RadioGroup 的变体。
<script setup lang="ts">
import type { RadioGroupItem } from '@nuxt/ui'
const items = ref<RadioGroupItem[]>([
{
label: 'Pro',
value: 'pro',
description: 'Tailored for indie hackers, freelancers and solo founders.'
},
{
label: 'Startup',
value: 'startup',
description: 'Best suited for small teams, startups and agencies.'
},
{
label: 'Enterprise',
value: 'enterprise',
description: 'Ideal for larger teams and organizations.'
}
])
</script>
<template>
<URadioGroup color="primary" variant="table" default-value="pro" :items="items" />
</template>
使用 size 属性更改 RadioGroup 的大小。
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<URadioGroup size="xl" variant="list" default-value="System" :items="items" />
</template>
使用 orientation 属性更改 RadioGroup 的方向。默认为 vertical。
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<URadioGroup orientation="horizontal" variant="list" default-value="System" :items="items" />
</template>
使用 indicator 属性来改变或隐藏指示器的位置。默认为 start。
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<URadioGroup indicator="end" variant="card" default-value="System" :items="items" />
</template>
使用 disabled 属性禁用 RadioGroup。
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>
<template>
<URadioGroup disabled default-value="System" :items="items" />
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
图例 | string | |
valueKey | 'value' | string | number当 |
labelKey | 'label' | string | number当 |
描述键 | 'description' | string | number当 |
items | RadioGroupItem[]
| |
modelValue | anyRadioGroup 的受控值。可以绑定为 | |
defaultValue | anyRadioGroup 初次渲染时的值。在您不需要控制 RadioGroup 状态时使用。 | |
尺寸 | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
variant | 'list' | "card" | "list" | "table" |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
orientation | 'vertical' | "horizontal" | "vertical"单选按钮的布局方向。 |
indicator | 'start' | "start" | "end" | "hidden"指示器的位置。 |
disabled | boolean当 | |
循环 | boolean当 | |
name | string字段的名称。作为名称/值对的一部分随其所属表单提交。 | |
required | boolean当为 | |
ui | { root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; container?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; } |
| 插槽 | 类型 |
|---|---|
图例 | {} |
label | { item: { [key: string]: any; label?: string | undefined; description?: string | undefined; disabled?: boolean | undefined; value?: AcceptableValue | undefined; class?: any; ui?: Pick<{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; container?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }, "label" | "description" | "indicator" | "item" | "container" | "base" | "wrapper"> | undefined; } & { id: string; }; modelValue?: AcceptableValue | undefined; } |
description | { item: { [key: string]: any; label?: string | undefined; description?: string | undefined; disabled?: boolean | undefined; value?: AcceptableValue | undefined; class?: any; ui?: Pick<{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; container?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }, "label" | "description" | "indicator" | "item" | "container" | "base" | "wrapper"> | undefined; } & { id: string; }; modelValue?: AcceptableValue | undefined; } |
| 事件 | 类型 |
|---|---|
update:modelValue | [value: any] |
change | [事件: Event] |
export default defineAppConfig({
ui: {
radioGroup: {
slots: {
root: 'relative',
fieldset: 'flex gap-x-2',
legend: 'mb-1 block font-medium text-default',
item: 'flex items-start',
container: 'flex items-center',
base: 'rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
indicator: 'flex items-center justify-center size-full after:bg-default after:rounded-full',
wrapper: 'w-full',
label: 'block font-medium text-default',
description: 'text-muted'
},
variants: {
color: {
primary: {
base: 'focus-visible:outline-primary',
indicator: 'bg-primary'
},
secondary: {
base: 'focus-visible:outline-secondary',
indicator: 'bg-secondary'
},
success: {
base: 'focus-visible:outline-success',
indicator: 'bg-success'
},
info: {
base: 'focus-visible:outline-info',
indicator: 'bg-info'
},
warning: {
base: 'focus-visible:outline-warning',
indicator: 'bg-warning'
},
error: {
base: 'focus-visible:outline-error',
indicator: 'bg-error'
},
neutral: {
base: 'focus-visible:outline-inverted',
indicator: 'bg-inverted'
}
},
variant: {
list: {
item: ''
},
card: {
item: 'border border-muted rounded-lg'
},
table: {
item: 'border border-muted'
}
},
orientation: {
horizontal: {
fieldset: 'flex-row'
},
vertical: {
fieldset: 'flex-col'
}
},
indicator: {
start: {
item: 'flex-row',
wrapper: 'ms-2'
},
end: {
item: 'flex-row-reverse',
wrapper: 'me-2'
},
hidden: {
base: 'sr-only',
wrapper: 'text-center'
}
},
size: {
xs: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
sm: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3.5',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
md: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
lg: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4.5',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
xl: {
fieldset: 'gap-y-1.5',
legend: 'text-base',
base: 'size-5',
item: 'text-base',
container: 'h-6',
indicator: 'after:size-2'
}
},
disabled: {
true: {
item: 'opacity-75',
base: 'cursor-not-allowed',
label: 'cursor-not-allowed',
description: 'cursor-not-allowed'
}
},
required: {
true: {
legend: "after:content-['*'] after:ms-0.5 after:text-error"
}
}
},
compoundVariants: [
{
size: 'xs',
variant: [
'card',
'table'
],
class: {
item: 'p-2.5'
}
},
{
size: 'sm',
variant: [
'card',
'table'
],
class: {
item: 'p-3'
}
},
{
size: 'md',
variant: [
'card',
'table'
],
class: {
item: 'p-3.5'
}
},
{
size: 'lg',
variant: [
'card',
'table'
],
class: {
item: 'p-4'
}
},
{
size: 'xl',
variant: [
'card',
'table'
],
class: {
item: 'p-4.5'
}
},
{
orientation: 'horizontal',
variant: 'table',
class: {
item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
fieldset: 'gap-0 -space-x-px'
}
},
{
orientation: 'vertical',
variant: 'table',
class: {
item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
fieldset: 'gap-0 -space-y-px'
}
},
{
color: 'primary',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-primary'
}
},
{
color: 'neutral',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-inverted'
}
},
{
color: 'primary',
variant: 'table',
class: {
item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]'
}
},
{
color: 'neutral',
variant: 'table',
class: {
item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]'
}
},
{
variant: [
'card',
'table'
],
disabled: true,
class: {
item: 'cursor-not-allowed'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
orientation: 'vertical',
indicator: 'start'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
radioGroup: {
slots: {
root: 'relative',
fieldset: 'flex gap-x-2',
legend: 'mb-1 block font-medium text-default',
item: 'flex items-start',
container: 'flex items-center',
base: 'rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
indicator: 'flex items-center justify-center size-full after:bg-default after:rounded-full',
wrapper: 'w-full',
label: 'block font-medium text-default',
description: 'text-muted'
},
variants: {
color: {
primary: {
base: 'focus-visible:outline-primary',
indicator: 'bg-primary'
},
secondary: {
base: 'focus-visible:outline-secondary',
indicator: 'bg-secondary'
},
success: {
base: 'focus-visible:outline-success',
indicator: 'bg-success'
},
info: {
base: 'focus-visible:outline-info',
indicator: 'bg-info'
},
warning: {
base: 'focus-visible:outline-warning',
indicator: 'bg-warning'
},
error: {
base: 'focus-visible:outline-error',
indicator: 'bg-error'
},
neutral: {
base: 'focus-visible:outline-inverted',
indicator: 'bg-inverted'
}
},
variant: {
list: {
item: ''
},
card: {
item: 'border border-muted rounded-lg'
},
table: {
item: 'border border-muted'
}
},
orientation: {
horizontal: {
fieldset: 'flex-row'
},
vertical: {
fieldset: 'flex-col'
}
},
indicator: {
start: {
item: 'flex-row',
wrapper: 'ms-2'
},
end: {
item: 'flex-row-reverse',
wrapper: 'me-2'
},
hidden: {
base: 'sr-only',
wrapper: 'text-center'
}
},
size: {
xs: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
sm: {
fieldset: 'gap-y-0.5',
legend: 'text-xs',
base: 'size-3.5',
item: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
md: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
lg: {
fieldset: 'gap-y-1',
legend: 'text-sm',
base: 'size-4.5',
item: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
xl: {
fieldset: 'gap-y-1.5',
legend: 'text-base',
base: 'size-5',
item: 'text-base',
container: 'h-6',
indicator: 'after:size-2'
}
},
disabled: {
true: {
item: 'opacity-75',
base: 'cursor-not-allowed',
label: 'cursor-not-allowed',
description: 'cursor-not-allowed'
}
},
required: {
true: {
legend: "after:content-['*'] after:ms-0.5 after:text-error"
}
}
},
compoundVariants: [
{
size: 'xs',
variant: [
'card',
'table'
],
class: {
item: 'p-2.5'
}
},
{
size: 'sm',
variant: [
'card',
'table'
],
class: {
item: 'p-3'
}
},
{
size: 'md',
variant: [
'card',
'table'
],
class: {
item: 'p-3.5'
}
},
{
size: 'lg',
variant: [
'card',
'table'
],
class: {
item: 'p-4'
}
},
{
size: 'xl',
variant: [
'card',
'table'
],
class: {
item: 'p-4.5'
}
},
{
orientation: 'horizontal',
variant: 'table',
class: {
item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
fieldset: 'gap-0 -space-x-px'
}
},
{
orientation: 'vertical',
variant: 'table',
class: {
item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
fieldset: 'gap-0 -space-y-px'
}
},
{
color: 'primary',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-primary'
}
},
{
color: 'neutral',
variant: 'card',
class: {
item: 'has-data-[state=checked]:border-inverted'
}
},
{
color: 'primary',
variant: 'table',
class: {
item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]'
}
},
{
color: 'neutral',
variant: 'table',
class: {
item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]'
}
},
{
variant: [
'card',
'table'
],
disabled: true,
class: {
item: 'cursor-not-allowed'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
orientation: 'vertical',
indicator: 'start'
}
}
}
})
]
})