• Vant React

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>

自定义颜色

通过 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 形状，可选值为 square 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) -