rice-ui

暗黑模式

Radio 单选框 ​

手机扫码预览
01:50
组件名：rice-radio-group、rice-radio

在一组备选项中进行单选。

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

基础用法 ​

该组件需搭配 rice-radio-group 使用。
通过 v-model 绑定变量，选中意味着变量的值为对应 Radio value 属性的值。

html
<rice-radio-group v-model="value">
  <rice-radio value="a" label="单选框1"></rice-radio>
  <rice-radio value="b" label="单选框2"></rice-radio>
</rice-radio-group>

<script setup>
  const value=ref('a')
</script>

自定义颜色 ​

通过 checked-color 可以设置选中状态下的颜色

html
<rice-radio-group v-model="value" checked-color="#07c160">
  <rice-radio value="a" label="单选框1"></rice-radio>
  <rice-radio value="b" label="单选框2"></rice-radio>
</rice-radio-group>

禁用状态 ​

在 RadioGroup 上设置 disabled 会禁用整个 单选框，在 Radio 上设置 disabled 只会禁用该单选框

html
<rice-radio-group v-model="value3" disabled>
  <rice-radio value="a" label="单选框1"></rice-radio>
  <rice-radio value="b" label="单选框2"></rice-radio>
</rice-radio-group>

自定义形状 ​

通过设置 shape 为 square 可以设置方形

html
<rice-radio-group v-model="value2" shape="square">
  <rice-radio value="a" label="单选框1"></rice-radio>
  <rice-radio value="b" label="单选框2"></rice-radio>
</rice-radio-group>

水平排列 ​

设置 direction 为 row 即可水平排列单选框

html
<rice-radio-group v-model="value2" direction="row">
  <rice-radio value="a" label="单选框1"></rice-radio>
  <rice-radio value="b" label="单选框2"></rice-radio>
</rice-radio-group>

自定义大小 ​

icon-size 可以设置单选框形状的大小，label-size 可以设置文本的大小

html
<rice-radio-group v-model="value2" icon-size="25" label-size="16px" direction="row">
  <rice-radio value="a" label="单选框1"></rice-radio>
  <rice-radio value="b" label="单选框2"></rice-radio>
</rice-radio-group>

左侧文本 ​

设置 icon-position 为 right 文本会显示在左侧，space-between 属性可以使图标和文本两端对齐

html
<rice-radio-group v-model="value4" icon-position="right" space-between>
  <rice-radio value="a" label="单选框1"></rice-radio>
  <rice-radio value="b" label="单选框2"></rice-radio>
</rice-radio-group>

自定义图标 ​

可以通过插槽实现自定义图标，插槽会传递 checked 和 disabled 参数

html
<rice-radio-group v-model="value5">
  <rice-radio value="a" label="单选框1">
    <template #icon="{checked}">
      <rice-icon :name="checked?'star-fill':'star'" color="#ee0a24" size="22px" />
    </template>
  </rice-radio>
  <rice-radio value="b" label="单选框2">
    <template #icon="{checked}">
      <rice-icon :name="checked?'star-fill':'star'" color="#ee0a24" size="22px" />
    </template>
  </rice-radio>
</rice-radio-group>

API ​

RadioGroup Props ​

属性名类型说明默认值
v-model/model-valueString|Number|Boolean绑定的值-
disabledBoolean是否禁用-
readonlyBoolean是否只读-
directionString排列方向，可选值：col、rowcol
checked-colorString选中状态下的颜色-
icon-sizeString|Numbericon的大小-
label-sizeString|Numberlabel文字的大小-
label-colorStringlabel文字的颜色-
shapeString形状，默认circle-圆形，可选square-方形circle
icon-positionString勾选图标的对齐方式，默认 left-左边，可选right-右边left
space-betweenBoolean两端对齐-
custom-styleObject自定义style-

Radio Props ​

属性名类型说明默认值
model-valueString|Number|Boolean选中项绑定的值-
valueString|Number|Boolean选中状态的值-
labelStringlabel文字-
disabledBoolean是否禁用-
readonlyBoolean是否只读-
checked-colorString选中状态下的颜色,如设置此值，将会覆盖radio-group的checkedColor值-
icon-sizeString|Numbericon的大小,如设置此值，将会覆盖radio-group的iconSize值-
label-sizeString|Numberlabel文字的大小,如设置此值，将会覆盖radio-group的labelSize值-
label-colorStringlabel文字的颜色,如设置此值，将会覆盖radio-group的labelColor值-
shapeString形状，如设置此值，将会覆盖radio-group的shape值，可选值：square、roundround
icon-positionString勾选图标的对齐方式，默认 left-左边，可选right-右边,如设置此值，将会覆盖radio-group的iconPosition，可选值：left、right-
space-betweenBoolean两端对齐,如设置此值，将会覆盖radio-group的spaceBetween-
custom-styleObject自定义style-

RadioGroup Events ​

事件名说明回调参数
change绑定值改变时触发(value:string|number|boolean)

Radio Events ​

事件名说明回调参数
change绑定值改变时触发(value:string|number|boolean)

Radio Slots ​

名称说明参数
default自定义文本{ checked : boolean, disabled : boolean }
icon自定义图标{ checked : boolean, disabled : boolean }

类型定义 ​

组件导出如下类型

ts
import { RadioDirection, RadioShape, RadioIconPosition } from "@/uni_modules/rice-ui"
// 组件类型
const radioGroupRef=ref<RiceRadioGroupComponentPublicInstance|null>(null)
const radioRef=ref<RiceRadioComponentPublicInstance|null>(null)