rice-ui

暗黑模式

Radio 单选框 ​

点击扫码预览
23:47
组件名：rice-radio-group、rice-radio
演示示例可扫模拟器状态栏上的二维码预览或 点击在线预览

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

平台兼容性 ​

uni-app x ​

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

基础用法 ​

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

vue
<template>
  <rice-radio-group v-model="radio" custom-class="demo-radio-group" @change="onChangeRadio">
    <rice-radio label="苹果" value="apple" />
    <rice-radio label="香蕉" value="banner" />
    <rice-radio label="榴莲" value="durian" />
  </rice-radio-group>
</template>

<script setup>
  const radio = ref("apple")
  const onChangeRadio = (val : string) => {
		console.log('value', val)
	}
</script>
css
<style scoped lang="scss">
.demo-radio-group{
  padding: 16px 16px 6px;
  background-color: #fff;
	.rice-radio {
		margin-bottom: 10px;
	}
}
</style>

水平排列 ​

将 direction 属性设置为 horizontal 后，单选框组会变成水平排列。

html
<rice-radio-group v-model="radio" direction="horizontal">
  <rice-radio label="苹果" value="apple" />
  <rice-radio label="香蕉" value="banner" />
  <rice-radio label="榴莲" value="durian" />
</rice-radio-group>

自定义形状 ​

shape 属性可选值为 square 和 dot，分别对应方形和圆点形。

html
<!-- 方形 -->
<rice-radio-group v-model="radio" shape="square" direction="horizontal">
 <rice-radio label="苹果" value="apple" />
 <rice-radio label="香蕉" value="banner" />
 <rice-radio label="榴莲" value="durian" />
</rice-radio-group>
<!-- 圆点形 -->
<rice-radio-group v-model="radio" shape="dot" direction="horizontal">
 <rice-radio label="苹果" value="apple" />
 <rice-radio label="香蕉" value="banner" />
 <rice-radio label="榴莲" value="durian" />
</rice-radio-group>

自定义颜色 ​

通过 active-color 修改 Radio 选中时的背景颜色。

html
<rice-radio-group v-model="radio" active-color="#ff4d4f" direction="horizontal">
 <rice-radio label="苹果" value="apple" />
 <rice-radio label="香蕉" value="banner" />
 <rice-radio label="榴莲" value="durian" active-color="#bbdb4a" />
</rice-radio-group>

自定义图标 ​

通过 icon 插槽可以自定义图标，并通过 checked 判断是否为选择状态，disabled 判断是否为禁用状态。

html
<rice-radio-group v-model="radio" direction="horizontal">
  <rice-radio label="苹果" value="apple">
    <template #icon="{checked}">
      <image v-if="checked" src="/static/images/apple-select.png" class="icon-img"></image>
      <image v-else src="/static/images/apple-normal.png" class="icon-img"></image>
    </template>
  </rice-radio>
  <rice-radio label="香蕉" value="banner">
    <template #icon="{checked}">
      <image v-if="checked" src="/static/images/banner-select.png" class="icon-img"></image>
      <image v-else src="/static/images/banner-normal.png" class="icon-img"></image>
    </template>
  </rice-radio>
  <rice-radio label="榴莲（禁用）" value="durian" disabled>
    <template #icon="{checked,disabled}">
      <image v-if="disabled" src="/static/images/durian-select.png" class="icon-img"></image>
      <image v-else src="/static/images/durian-normal.png" class="icon-img"></image>
    </template>
  </rice-radio>
</rice-radio-group>

水平两端对齐 ​

在 direction 为 vertical 的前提下，可以通过设置 space-between 为 true ，让 Radio 水平两端对齐。可以通过设置 icon-position 为 left 或 right，将选择框的位置设置为左边或右边。

html
<rice-radio-group v-model="radio" space-between icon-position="right">
  <rice-radio label="苹果" value="apple" />
  <rice-radio label="香蕉" value="banner" />
  <rice-radio label="榴莲" value="durian" disabled />
</rice-radio-group>

禁用状态 ​

将 disabled 设置为 true，即可禁用 Radio 。

html
<rice-radio-group v-model="radio" disabled direction="horizontal">
  <rice-radio label="苹果" value="apple" />
  <rice-radio label="香蕉" value="banner" />
  <rice-radio label="榴莲" value="durian" />
</rice-radio-group>

API ​

RadioGroup Props ​

参数说明类型默认值
v-model选中项绑定值string|number|boolean-
disabled是否禁用整个 RadioGroupbooleanfalse
readonly是否只读booleanfalse
direction排列方向，可选 horizontalstringvertical
activeColor选中状态下的颜色string-
iconSizeicon的大小，单位支持 px和 rpxstring|number20px
labelColor文字的颜色string-
labelSize文字的大小，单位支持 px和 rpxstring|number15px
shape形状，可选 方形：square，圆点形：dotstringcircle
iconPosition选择框的对齐方式，可选rightstringleft
spaceBetween是否水平两端对齐，direction 为 vertical 时有效booleanfalse
customClass自定义classstring-
customStyle自定义styleObject-

Radio Props ​

参数说明类型默认值
label单选框的文字string|number-
value单选框的值string|number|boolean-
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
activeColor选中状态下的颜色，如设置此值，将会覆盖RadioGroup的activeColor值string-
iconSizeicon的大小，单位支持 px和 rpx，如设置此值，将会覆盖RadioGroup的iconSize值string|number20px
labelColor文字的颜色，如设置此值，将会覆盖RadioGroup的labelColor值string-
labelSize文字的大小，单位支持 px和 rpx ，如设置此值，将会覆盖RadioGroup的labelSize值string|number15px
shape形状，可选 方形：square，圆点形：dot ，如设置此值，将会覆盖RadioGroup的shape值stringcircle
iconPosition选择框的对齐方式，可选right ，如设置此值，将会覆盖RadioGroup的iconPosition值stringleft
spaceBetween是否水平两端对齐，direction 为 vertical 时有效 ，如设置此值，将会覆盖RadioGroup的spaceBetween值booleanfalse
customClass自定义classstring-
customStyle自定义styleObject-

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, RadioGroupProps, RadioProps } from "@/uni_modules/rice-ui"
// 组件类型
const radioGroupRef=ref<RiceRadioGroupComponentPublicInstance|null>(null)
const radioRef=ref<RiceRadioComponentPublicInstance|null>(null)