
- **用法**
- 属性
复制
询问AI
import { Radio } from "twenty-ui/display";
export const MyComponent = () => {
const handleRadioChange = (event) => {
console.log("Radio button changed:", event.target.checked);
};
const handleCheckedChange = (checked) => {
console.log("Checked state changed:", checked);
};
return (
<Radio
checked={true}
value="Option 1"
onChange={handleRadioChange}
onCheckedChange={handleCheckedChange}
size="large"
disabled={false}
labelPosition="right"
/>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| 样式 | React.CSS 属性 | 组件的附加行内样式 |
| 类名 | string | 用于额外样式的可选 CSS 类 |
| 选中 | 布尔值 | 指示单选按钮是否被选中 |
| 值 | string | 与单选按钮相关联的标签或文本 |
| onChange | 函数 | 选择的单选按钮改变时调用的函数 |
| onCheckedChange | 函数 | 当单选按钮的 checked 状态改变时调用的函数 |
| 大小 | 字符串 | 单选按钮的尺寸。 选项包括:大 和 小 |
| 禁用 | 布尔值 | 如果为 true,则单选按钮将被禁用且不可点击 |
| 标签位置 | 字符串 | 标签文字相对于单选按钮的位置。 有两个选项:左 和 右 |
单选按钮组
将相关的单选按钮组合在一起。- 用法
- 属性
复制
询问AI
import React, { useState } from "react";
import { Radio, RadioGroup } from "twenty-ui/display";
export const MyComponent = () => {
const [selectedValue, setSelectedValue] = useState("Option 1");
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
return (
<RadioGroup value={selectedValue} onChange={handleChange}>
<Radio value="Option 1" />
<Radio value="Option 2" />
<Radio value="Option 3" />
</RadioGroup>
);
};
| 属性 | 类型 | 描述 |
|---|---|---|
| 值 | 字符串 | 当前选中单选按钮的值 |
| onChange | function | 当单选按钮改变时触发的回调函数 |
| onValueChange | 函数 | 当组中选定的值发生变化时触发的回调函数。 |
| 子元素 | React.ReactNode | 允许您将 React 组件(如单选按钮)作为子项传递给单选按钮组 |