github-actions[bot]
cd73088be6
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
113 lines
3.1 KiB
Plaintext
113 lines
3.1 KiB
Plaintext
---
|
|
title: 单选按钮
|
|
icon: circle-dot
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="标题" />
|
|
</Frame>
|
|
|
|
当用户只能从一系列选项中选择一个时使用。
|
|
|
|
<Tabs>
|
|
<Tab title="**用法**">
|
|
|
|
```jsx
|
|
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"
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
<Tab title="属性">
|
|
|
|
|
|
| 属性 | 类型 | 描述 |
|
|
| --------------- | -------------- | ------------------------------- |
|
|
| 样式 | `React.CSS` 属性 | 组件的附加行内样式 |
|
|
| 类名 | string | 用于额外样式的可选 CSS 类 |
|
|
| 选中 | 布尔值 | 指示单选按钮是否被选中 |
|
|
| 值 | string | 与单选按钮相关联的标签或文本 |
|
|
| onChange | 函数 | 选择的单选按钮改变时调用的函数 |
|
|
| onCheckedChange | 函数 | 当单选按钮的 `checked` 状态改变时调用的函数 |
|
|
| 大小 | 字符串 | 单选按钮的尺寸。 选项包括：`大` 和 `小` |
|
|
| 禁用 | 布尔值 | 如果为 `true`，则单选按钮将被禁用且不可点击 |
|
|
| 标签位置 | 字符串 | 标签文字相对于单选按钮的位置。 有两个选项：`左` 和 `右` |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## 单选按钮组
|
|
|
|
将相关的单选按钮组合在一起。
|
|
|
|
<Tabs>
|
|
<Tab title="用法">
|
|
|
|
```jsx
|
|
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>
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
</Tab>
|
|
<Tab title="属性">
|
|
|
|
|
|
| 属性 | 类型 | 描述 |
|
|
| ------------- | ----------------- | -------------------------------- |
|
|
| 值 | 字符串 | 当前选中单选按钮的值 |
|
|
| onChange | function | 当单选按钮改变时触发的回调函数 |
|
|
| onValueChange | 函数 | 当组中选定的值发生变化时触发的回调函数。 |
|
|
| 子元素 | `React.ReactNode` | 允许您将 React 组件（如单选按钮）作为子项传递给单选按钮组 |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|