github-actions[bot]
4c4eeef5ae
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
105 lines
4.2 KiB
Plaintext
105 lines
4.2 KiB
Plaintext
---
|
|
title: Radio
|
|
image: /images/user-guide/create-workspace/workspace-cover.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Utilisé lorsque les utilisateurs peuvent choisir une seule option parmi une série d'options.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Propriétés | Type | Description |
|
|
| --------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
| style | propriétés `React.CSS` | Styles inline supplémentaires pour le composant |
|
|
| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
|
|
| coché | booléen | Indique si le bouton radio est coché |
|
|
| valeur | chaîne | L'étiquette ou le texte associé au bouton radio |
|
|
| onChange | fonction | La fonction appelée lorsque le bouton radio sélectionné est modifié |
|
|
| onCheckedChange | fonction | La fonction appelée lorsque l'état `checked` du bouton radio change |
|
|
| taille | chaîne | La taille du bouton radio. Les options incluent : `large` et `small` |
|
|
| désactivé | booléen | Si `true`, le bouton radio est désactivé et ne peut pas être cliqué |
|
|
| positionLabel | chaîne | La position du texte du label par rapport au bouton radio. A deux options : `left` et `right` |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Groupe Radio
|
|
|
|
Regroupe ensemble des boutons radio associés.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Propriétés | Type | Description |
|
|
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
| valeur | chaîne | La valeur du bouton radio actuellement sélectionné |
|
|
| onChange | fonction | La fonction de rappel déclenchée lorsque le bouton radio est changé |
|
|
| onValueChange | fonction | La fonction de rappel déclenchée lorsque la valeur sélectionnée dans le groupe change. |
|
|
| enfants | `React.ReactNode` | Permet de passer des composants React (tels que Radio) en tant qu'enfants au Groupe Radio |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|