github-actions[bot]
2b3b2362db
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
114 lines
3.6 KiB
Plaintext
114 lines
3.6 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` 속성 | 컴포넌트의 추가 인라인 스타일 |
|
|
| 클래스 네임 | 문자열 | 추가 스타일링을 위한 선택적 CSS 클래스 |
|
|
| 체크됨 | 부울 | 라디오 버튼이 체크되었는지 여부를 나타냅니다 |
|
|
| 값 | 문자열 | 라디오 버튼과 연결된 라벨 또는 텍스트 |
|
|
| onChange | 함수 | 선택된 라디오 버튼이 변경될 때 호출되는 기능 |
|
|
| onCheckedChange | 함수 | 라디오 버튼의 `체크` 상태가 변경될 때 호출되는 기능 |
|
|
| 크기 | 문자열 | 라디오 버튼의 크기입니다. 옵션에는 `large`와 `small`이 포함됩니다 |
|
|
| 비활성화됨 | 부울 | `참`이면 라디오 버튼이 비활성화되어 클릭할 수 없습니다 |
|
|
| 라벨 위치 | 문자열 | 라벨 텍스트의 라디오 버튼에 대한 상대 위치입니다. 두 가지 옵션: `left`와 `right` |
|
|
|
|
|
|
|
|
|
|
</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 | 기능 | 라디오 버튼이 변경될 때 트리거되는 콜백 기능 |
|
|
| onValueChange | 기능 | 그룹에서 선택된 값이 변경될 때 트리거되는 콜백 기능. |
|
|
| 자식 | `React.ReactNode` | Radio와 같은 React 컴포넌트를 자식으로 Radio Group에 전달할 수 있습니다 |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|