Entrée de texte
Permet aux utilisateurs de saisir et de modifier du texte.- Utilisation
- Propriétés
import { TextInput } from "@/ui/input/components/TextInput";
export const MyComponent = () => {
const handleChange = (text) => {
console.log("Input changed:", text);
};
const handleKeyDown = (event) => {
console.log("Key pressed:", event.key);
};
return (
<TextInput
className
label="Username"
onChange={handleChange}
fullWidth={false}
disableHotkeys={false}
error="Invalid username"
onKeyDown={handleKeyDown}
RightIcon={null}
/>
);
};
| Propriétés | Type | Description |
|---|---|---|
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
| étiquette | chaîne | Représente l’étiquette de l’entrée |
| onChange | fonction | La fonction appelée lorsque la valeur de l’entrée change |
| largeurTotale | booléen | Indique si l’entrée doit occuper 100% de la largeur |
| désactiverLesRaccourcis | booléen | Indique si les raccourcis sont activés pour l’entrée |
| erreur | chaîne | Représente le message d’erreur à afficher. Lorsqu’il est fourni, il ajoute également une icône d’erreur sur le côté droit de l’entrée |
| surToucheEnfoncée | fonction | Appelée lorsqu’une touche est enfoncée alors que le champ de saisie est focalisé. Reçoit un React.KeyboardEvent en tant qu’argument |
| IcôneDroite | ComposantIcône | Un composant icône facultatif affiché sur le côté droit de l’entrée |
Entrée de texte à taille automatique
Composant d’entrée de texte qui ajuste automatiquement sa hauteur en fonction du contenu.- Utilisation
- Propriétés
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
export const MyComponent = () => {
return (
<AutosizeTextInput
onValidate={() => console.log("onValidate function fired")}
minRows={1}
placeholder="Write a comment"
onFocus={() => console.log("onFocus function fired")}
variant="icon"
buttonTitle
value="Task: "
/>
);
};
| Propriétés | Type | Description |
|---|---|---|
| surValider | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l’utilisateur valide l’entrée |
| minLignes | nombre | Le nombre minimum de lignes pour la zone de texte |
| espace réservé | chaîne | Le texte d’espace réservé que vous souhaitez afficher lorsque la zone de texte est vide |
| surFocus | fonction | La fonction de rappel que vous souhaitez déclencher lorsque la zone de texte prend le focus |
| variante | chaîne | La variante de l’entrée. Les options incluent : défaut, icône, et bouton |
| titreBouton | chaîne | Le titre pour le bouton (applicable uniquement à la variante bouton) |
| valeur | chaîne | La valeur initiale pour la zone de texte |
Zone de texte
Vous permet de créer des entrées de texte multiligne.- Utilisation
- Propriétés
import { TextArea } from "@/ui/input/components/TextArea";
export const MyComponent = () => {
return (
<TextArea
disabled={false}
minRows={4}
onChange={()=>console.log('On change function fired')}
placeholder="Enter text here"
value=""
/>
);
};
| Propriétés | Type | Description |
|---|---|---|
| désactivé | booléen | Indique si la zone de texte est désactivée |
| minLignes | nombre | Nombre minimum de lignes visibles pour la zone de texte. |
| surChangement | fonction | Fonction de rappel déclenchée lorsque le contenu de la zone de texte change |
| espace réservé | chaîne | Texte de l’espace réservé affiché lorsque la zone de texte est vide |
| valeur | chaîne | La valeur actuelle de la zone de texte |