#Radio 单选框
#介绍
在一组备选项中进行单选。
#引入
import { Radio } from "@taroify/core";#代码演示
#基础用法
通过 value 绑定值当前选中项的 name。
<Radio.Group defaultValue="1">
<Radio name="1">单选框 1</Radio>
<Radio name="2">单选框 2</Radio>
</Radio.Group>#水平排列
将 direction 属性设置为 horizontal 后，单选框组会变成水平排列。
<Radio.Group defaultValue="1" direction="horizontal">
<Radio name="1">单选框 1</Radio>
<Radio name="2">单选框 2</Radio>
</Radio.Group>#禁用状态
通过 disabled 属性禁止选项切换，在 Radio 上设置 disabled 可以禁用单个选项。
<Radio.Group defaultValue="1" disabled>
<Radio name="1">单选框 1</Radio>
<Radio name="2">单选框 2</Radio>
</Radio.Group>#自定义形状
将 shape 属性设置为 square，单选框的形状会变成方形。
<Radio.Group defaultValue="1">
<Radio name="1" shape="square">
单选框 1
</Radio>
<Radio name="2" shape="square">
单选框 2
</Radio>
</Radio.Group>#按钮形状
将 shape 属性设置为 button，单选框会变成适合规格选择等场景的按钮。按钮形状下，icon 和 size 属性不生效。
<Radio.Group defaultValue="a" direction="horizontal">
<Radio name="a" shape="button">单选框 a</Radio>
<Radio name="b" shape="button">单选框 b</Radio>
</Radio.Group>#自定义颜色
通过 css 属性设置选中状态的图标颜色。
<Radio.Group className="custom-color" defaultValue="1">
<Radio name="1">单选框 1</Radio>
<Radio name="2">单选框 2</Radio>
</Radio.Group>.custom-color {
--radio-checked-icon-background-color: #ee0a24;
--radio-checked-icon-border-color: #ee0a24;
}#自定义大小
通过 size 属性可以自定义图标的大小。
<Radio.Group defaultValue="1" size={24}>
<Radio name="1">单选框 1</Radio>
<Radio name="2">单选框 2</Radio>
</Radio.Group>#自定义图标
通过 icon 属性自定义图标。
function CustomIconRadio() {
const [value, setValue] = useState("1")
return (
<Radio.Group value={value} onChange={setValue}>
<Radio
name="1"
icon={
<Image
src={`https://img.yzcdn.cn/vant/user-${value === "1" ? "active" : "inactive"}.png`}
style={{
width: "25px",
height: "20px",
}}
/>
}
>
单选框 1
</Radio>
<Radio
name="2"
icon={
<Image
src={`https://img.yzcdn.cn/vant/user-${value === "2" ? "active" : "inactive"}.png`}
style={{
width: "25px",
height: "20px",
}}
/>
}
>
单选框 1
</Radio>
</Radio.Group>
)
}#与 Cell 组件一起使用
此时你需要再引入 Cell 和 Cell.Group 组件。
<Radio.Group defaultValue="1">
<Cell.Group clickable>
<Cell title="单选框 1">
<Radio name="1" />
</Cell>
<Cell title="单选框 2">
<Radio name="2" />
</Cell>
</Cell.Group>
</Radio.Group>#API
#Radio Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 标识符 | any | - |
| shape v1.0.0 | 形状，可选值为 square button | string | round |
| disabled | 是否为禁用状态 | boolean | false |
| size | 图标大小，默认单位为px | number | string | 20px |
#Radio.Group Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultValue | 默认选中项的标识符 | any | - |
| value | 当前选中项的标识符 | any | - |
| disabled | 是否禁用所有单选框 | boolean | false |
| direction | 排列方向，可选值为horizontal | string | vertical |
| size | 所有单选框的图标大小，默认单位为px | number | string | 20px |
#Radio.Group Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| onChange | 当绑定值变化时触发的事件 | name: string |
#主题定制
#样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --radio-size | 20px * $hd | - |
| --radio-font-size | var(--font-size-lg) | - |
| --radio-border-color | var(--gray-5) | - |
| --radio-transition-duration | var(--animation-duration-fast) | - |
| --radio-gap | var(--padding-sm) | - |
| --radio-label-margin | var(--padding-xs) | - |
| --radio-label-color | var(--text-color) | - |
| --radio-label-line-height | var(--radio-size) | - |
| --radio-disabled-label-color | var(--gray-5) | - |
| --radio-icon-font-size | var(--radio-size) | - |
| --radio-checked-icon-color | var(--white) | - |
| --radio-checked-icon-border-color | var(--primary-color) | - |
| --radio-checked-icon-background-color | var(--primary-color) | - |
| --radio-disabled-icon-color | var(--gray-5) | - |
| --radio-disabled-icon-border-color | var(--gray-5) | - |
| --radio-disabled-icon-background-color | var(--border-color) | - |
| --radio-button-padding v1.0.0 | 5px * $hd 18px * $hd | - |
| --radio-button-border-radius v1.0.0 | var(--border-radius-max) | - |
| --radio-button-color v1.0.0 | var(--text-color) | - |
| --radio-button-background-color v1.0.0 | var(--gray-1) | - |
| --radio-button-border-color v1.0.0 | var(--radio-button-background-color) | - |
| --radio-button-checked-color v1.0.0 | var(--primary-color) | - |
| --radio-button-checked-background-color v1.0.0 | var(--white) | - |
| --radio-button-checked-border-color v1.0.0 | var(--primary-color) | - |
| --radio-button-disabled-opacity v1.0.0 | var(--disabled-opacity) | - |