Radio
单选项目。
导入
import { Radio } from '@ray-js/ray';
属性说明
属性 | 类型 | 默认值 | 说明 | 属性 |
---|---|---|---|---|
value | string | radio 标识。当该 radio 选中时,Radio.Group 的 change 事件会携带 radio 的 value | 涂鸦、微信 | |
checked | boolean | false | 当前是否选中 | 涂鸦、微信 |
disabled | boolean | false | 是否禁用 | 涂鸦、微信 |
color | string | '#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';
属性说明
属性 | 类型 | 是否必填 | 默认值 | 说明 | 支持平台 |
---|---|---|---|---|---|
options | RadioOption[] | 是 | 组项(Web 端非必填) | 涂鸦、微信 | |
disabled | boolean | 否 | false | 是否禁用 | 涂鸦、微信 |
onChange | (event: { type: 'change'; value: string[] }) => void | 否 | 选中项发生改变时触发 change 事件 | 涂鸦、微信 |
RadioOption
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
label | string | 跟随文本内容 | |
value | string | radio 的 Value | |
checked | boolean | false | 当前是否选中 |
disabled | boolean | false | 是否禁用 |
color | string | '#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 小程序开发。