单选框 Radio

这个组件叫做单选框......

基础使用

单选框 Radio 有两种样式变体，普通模式（'normal'，默认）和经典模式（retro）。经典模式的样式为致敬早期的游戏 UI 而设置。

单选框 Radio，传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

Basic Checkbox

Uncontrolled

Set Label By Prop

Retro Style

Retro Style Checked

隐藏源代码

禁用、只读状态

单选框 Radio，readonly 设置只读，disabled 设置禁用。此时内部 <input> 都会被设置 disabled，它们之间几乎只有样式不一样。

Checked

Unchecked

Checked Readonly

Unchecked Readonly

Checked

Unchecked

Checked Readonly

Unchecked Readonly

隐藏源代码

单选组

可以通过组合 RadioGroup 和 Radio 来形成一个单选组。

RadioGroup 的值为选中的 Radio 单选框组件的 value。

类似地，RadioGroup 传入 modelValue 进入受控模式。不传或者为 undefined 则为非受控模式，此时可以传入 defaultValue 属性作为默认值。

Egg Festival

Desert Festival

Flower Dance

Luau

Trout Derby

Dance of the Moonlight Jellies

Retro Style

Night Market

Feast of the Winter Star

Readonly

Stardew Valley Fai

Spirit's Eve

Disabled

Festival of Ice

SquidFest

隐藏源代码

垂直排列

RadioGroup 的 direction 属性用于设置子单选框的排列方向。

Horizontal

Vertical

Chicken

Void Chicken

Golden Chicken

Dinosaur

Ostrich

Slime

隐藏源代码

单选框尺寸

Radio 和 RadioGroup 的 size 属性都可以用于设置单选框的尺寸。

Single Radio

Small

Medium

Large

Small & Retro

Medium & Retro

Large & Retro

Group

Yes

or

No

Yes

or

No

Yes

or

No

隐藏源代码

选项属性

RadioGroup 的 options 属性用于直接传入选项，可以用于简单单选组的快速创建。

Cauliflower

Parsnip

Potato

Mixed Seeds

Corn

Pepper

Radish

Wheat

Mixed Seeds

隐藏源代码

API

RadioProps

属性	类型	可选	默认值	描述	版本
modelValue	boolean | null	是		单选框组件 Radio 的值（受控模式）。	0.0.3
defaultValue	boolean | null	是		单选框组件 Radio 的默认值（非受控模式）。	0.0.3
variant	'normal' | 'retro'	是	'normal'	单选框的样式变体。	0.0.3
disabled	boolean	是	false	禁用状态。	0.0.3
readonly	boolean	是	false	只读状态。	0.0.3
label	string	是		单选框的文本。	0.0.3
value	any	是		单选框的原生 value 属性。	0.0.3
size	'medium' | 'large' | 'small'	是	'medium'	单选框的大小。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能。	0.1.0

RadioEvents

事件	参数	描述	版本
update:modelValue	value: boolean	更新 modelValue 的回调。	0.0.3
input	value: boolean, event: InputEvent	选中单选框的回调。	0.0.3
change	value: boolean, event: Event	单选框选中状态改变的回调。	0.0.3
focus	event: FocusEvent	单选框聚焦的回调。	0.0.3
blur	event: FocusEvent	单选框失去焦点的回调。	0.0.3

RadioGroupProps

属性	类型	可选	默认值	描述	版本
modelValue	any	是		单选组组件 RadioGroup 的值（受控模式）。	0.0.3
defaultValue	any	是		单选组组件 RadioGroup 的默认值（非受控模式）。	0.0.3
variant	'normal' | 'retro'	是		后代的单选框组件的样式变体，如果设置，优先于后代的单选框组件自身的 variant。	0.0.3
disabled	boolean	是	false	禁用状态。	0.0.3
readonly	boolean	是	false	只读状态。	0.0.3
direction	'horizontal' | 'vertical'	是	'horizontal'	单选框子组件排列方向。	0.0.3
options	(RadioGroupOption | string)[]	是		单选组选项。	0.0.3
size	'medium' | 'large' | 'small'	是		后代的单选框组件的尺寸大小，如果设置，优先于后代的单选框组件自身的 size。	0.0.3
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，会影响 Radio 子组件的同名属性。	0.1.0

RadioGroupSlots

插槽	参数	描述	版本
default		单选框子组件。	0.0.3

RadioGroupEvents

事件	参数	描述	版本
update:modelValue	value: any	更新 modelValue 的回调。	0.0.3
change	value: any	单选组选中内容改变的回调。	0.0.3

Option

export interface Option<T = any> {
	value: T
	label: string
}

RadioGroupOption

export interface RadioGroupOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}