单选框 Radio

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

基础使用

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

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

<template>
	<px-space>
		<px-radio v-model="checked">Basic Checkbox</px-radio>
		<px-radio :default-value="true">Uncontrolled</px-radio>
		<px-radio label="Set Label By Prop"></px-radio>
		<px-radio variant="retro">Retro Style</px-radio>
		<px-radio variant="retro" :default-value="true">Retro Style Checked</px-radio>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>

禁用、只读状态

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

<template>
	<px-space direction="vertical">
		<px-space>
			<px-radio disabled :default-value="true">Checked</px-radio>
			<px-radio disabled>Unchecked</px-radio>
			<px-radio readonly :default-value="true">Checked Readonly</px-radio>
			<px-radio readonly>Unchecked Readonly</px-radio>
		</px-space>
		<px-space>
			<px-radio variant="retro" disabled :default-value="true">Checked</px-radio>
			<px-radio variant="retro" disabled>Unchecked</px-radio>
			<px-radio variant="retro" readonly :default-value="true">Checked Readonly</px-radio>
			<px-radio variant="retro" readonly>Unchecked Readonly</px-radio>
		</px-space>
	</px-space>
</template>

单选组

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

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

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

<template>
	<px-space direction="vertical">
		<px-radio-group v-model="group">
			<px-radio value="Egg Festival">Egg Festival</px-radio>
			<px-radio value="Desert Festival">Desert Festival</px-radio>
			<px-radio value="Flower Dance">Flower Dance</px-radio>
		</px-radio-group>
		<px-radio-group default-value="Luau">
			<px-radio value="Luau">Luau</px-radio>
			<px-radio value="Trout Derby">Trout Derby</px-radio>
			<px-radio value="Dance of the Moonlight Jellies">Dance of the Moonlight Jellies</px-radio>
		</px-radio-group>
		<h4>Retro Style</h4>
		<px-radio-group default-value="Night Market" variant="retro">
			<px-radio value="Night Market">Night Market</px-radio>
			<px-radio value="Feast of the Winter Star">Feast of the Winter Star</px-radio>
		</px-radio-group>
		<h4>Readonly</h4>
		<px-radio-group default-value="Stardew Valley Fai" readonly>
			<px-radio value="Stardew Valley Fai">Stardew Valley Fai</px-radio>
			<px-radio value="Spirit's Eve">Spirit's Eve</px-radio>
		</px-radio-group>
		<h4>Disabled</h4>
		<px-radio-group default-value="Festival of Ice" disabled>
			<px-radio value="Festival of Ice">Festival of Ice</px-radio>
			<px-radio value="SquidFest">SquidFest</px-radio>
		</px-radio-group>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const group = ref<string | null>(null)
</script>

垂直排列

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

<template>
	<px-switch v-model="vertical" active-label="Vertical" inactive-label="Horizontal"></px-switch>
	<br />
	<br />
	<px-radio-group :direction="vertical ? 'vertical' : 'horizontal'">
		<px-radio value="Chicken">Chicken</px-radio>
		<px-radio value="Void Chicken">Void Chicken</px-radio>
		<px-radio value="Golden Chicken">Golden Chicken</px-radio>
	</px-radio-group>
	<px-radio-group variant="retro" :direction="vertical ? 'vertical' : 'horizontal'">
		<px-radio value="Dinosaur">Dinosaur</px-radio>
		<px-radio value="Ostrich">Ostrich</px-radio>
		<px-radio value="Slime">Slime</px-radio>
	</px-radio-group>
</template>

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

const vertical = ref(false)
</script>

<style lang="css" scoped>
.px-radio-group {
	margin-top: 16px;
	margin-right: 16px;
}
</style>

单选框尺寸

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

<template>
	<px-space direction="vertical">
		<h4>Single Radio</h4>
		<px-space>
			<px-radio size="small">Small</px-radio>
			<px-radio>Medium</px-radio>
			<px-radio size="large">Large</px-radio>
		</px-space>
		<px-space>
			<px-radio variant="retro" size="small">Small & Retro</px-radio>
			<px-radio variant="retro">Medium & Retro</px-radio>
			<px-radio variant="retro" size="large">Large & Retro</px-radio>
		</px-space>
		<h4>Group</h4>
		<px-radio-group :options="options" size="small"></px-radio-group>
		<px-radio-group :options="options"></px-radio-group>
		<px-radio-group :options="options" size="large"></px-radio-group>
	</px-space>
</template>

<script setup lang="ts">
const options = ['Yes', 'or', 'No']
</script>

选项属性

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

<template>
	<px-space direction="vertical">
		<px-radio-group :options="options"></px-radio-group>
		<px-radio-group :options="optionsRetro" variant="retro"></px-radio-group>
	</px-space>
</template>

<script setup lang="ts">
const options = [
	'Cauliflower',
	'Parsnip',
	'Potato',
	{
		value: 'Mixed Seeds',
		label: 'Mixed Seeds',
		disabled: true
	}
]
const optionsRetro = [
	'Corn',
	'Pepper',
	'Radish',
	'Wheat',
	{
		value: 'Mixed Seeds',
		label: 'Mixed Seeds',
		disabled: true
	}
]
</script>

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

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

RadioGroupSlots

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

RadioGroupEvents

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

RadioGroupOption

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

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

单选框 Radio ​

基础使用 ​

禁用、只读状态 ​

单选组 ​

Retro Style

Readonly

Disabled

垂直排列 ​

单选框尺寸 ​

Single Radio

Group

选项属性 ​

API ​

RadioProps ​

RadioEvents ​

RadioGroupProps ​

RadioGroupSlots ​

RadioGroupEvents ​

RadioGroupOption ​