智能小程序 Ray 开发——表单组件 Radio 和 RadioGroup 实操讲解

Radio

单选项目。

导入

import { Radio } from '@ray-js/ray';

属性说明

属性类型默认值说明属性
valuestringradio 标识。当该 radio 选中时,Radio.Group 的 change 事件会携带 radio 的 value涂鸦、微信
checkedbooleanfalse当前是否选中涂鸦、微信
disabledbooleanfalse是否禁用涂鸦、微信
colorstring'#007AFF'Radio 的颜色,同 css 的 color涂鸦、微信

示例代码

基本使用
import React from 'react';
import { Radio } from '@ray-js/components';
 
export default function () {
  return <Radio disabled checked />;
}

 👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。 

 

RadioGroup

多项选择器组,内部由多个 Radio 组成。

导入

import { RadioGroup } from '@ray-js/ray';

属性说明

属性类型是否必填默认值说明支持平台
optionsRadioOption[]组项(Web 端非必填)涂鸦、微信
disabledbooleanfalse是否禁用涂鸦、微信
onChange(event: { type: 'change'; value: string[] }) => void选中项发生改变时触发 change 事件涂鸦、微信

 

RadioOption

属性类型默认值说明
labelstring跟随文本内容
valuestringradio 的 Value
checkedbooleanfalse当前是否选中
disabledbooleanfalse是否禁用
colorstring'#007AFF'Radio 的颜色,同 css 的 color

示例代码

基本使用
import React from 'react';
import { RadioGroup, Radio } from '@ray-js/components';
 
export default function () {
  const changeRadio = (e) => {
    console.log('RadioGroup的 onChange事件触发', e);
  };
  const options = [
    { label: 'Apple', value: 'Apple', color: '#ff00ff' },
    { label: 'Pear', value: 'Pear', checked: true },
    { label: 'Orange', value: 'Orange', disabled: true, checked: true },
  ];
  return (
    <RadioGroup onChange={changeRadio}>
      {options.map((item) => (
        <label key={item.value}>
          <Radio
            value={item.value}
            checked={item.checked}
            color={item.color}
            disabled={item.disabled}
          />
          {item.label}
        </label>
      ))}
    </RadioGroup>
  );
}

👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。 

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值