
Introduceți text
Permite utilizatorilor să introducă și să editeze text.- Utilizare
- Proprietăți
import { TextInput } from "@/ui/input/components/TextInput";
export const MyComponent = () => {
const handleChange = (text) => {
console.log("Textul introdus s-a schimbat:", text);
};
const handleKeyDown = (event) => {
console.log("Tastă apăsată:", event.key);
};
return (
<TextInput
className
label="Nume de utilizator"
onChange={handleChange}
fullWidth={false}
disableHotkeys={false}
error="Nume de utilizator nevalid"
onKeyDown={handleKeyDown}
RightIcon={null}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| etichetă | string | Reprezintă eticheta pentru intrare |
| onChange | funcție | The function called when the input value changes |
| lățimeCompletă | boolean | Indică dacă intrarea ar trebui să ocupe 100% din lățime |
| disableHotkeys | boolean | Indică dacă tastele rapide sunt activate pentru intrare |
| eroare | șir | Reprezintă mesajul de eroare care să fie afișat. Când este oferit, adaugă și o pictogramă de eroare pe partea dreaptă a intrării |
| onKeyDown | funcție | Apelează atunci când o tastă este apăsată în timp ce câmpul de intrare este focalizat. Primește un React.KeyboardEvent ca argument |
| RightIcon | ComponentaIcoana | An optional icon component displayed on the right side of the input |
Autosize Text Input
Componenta de intrare text care își ajustează automat înălțimea în funcție de conținut.- Utilizare
- Proprietăți
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
export const MyComponent = () => {
return (
<AutosizeTextInput
onValidate={() => console.log("funcția onValidate a fost declanșată")}
minRows={1}
placeholder="Scrie un comentariu"
onFocus={() => console.log("funcția onFocus a fost declanșată")}
variant="icon"
buttonTitle
value="Sarcină: "
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| onValidate | funcție | The callback function you want to trigger when the user validates the input |
| minRows | număr | Numărul minim de rânduri pentru aria textului |
| text sugestiv | string | Text loc de plasare afișat când aria textului este goală |
| onFocus | funcție | Funcția de apelare dorită când aria textului câștigă focalizare |
| variantă | string | Varianta intrării. Opțiuni includ: implicit, icon, și buton |
| buttonTitle | string | Titlul pentru buton (aplicabil doar pentru varianta butonului) |
| valoare | string | Valoarea inițială pentru aria textului |
Text Area
Vă permite să creați intrări de text pe mai multe linii.- Utilizare
- Proprietăți
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=""
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| dezactivat | boolean | Indică dacă aria textului este dezactivată |
| minRows | număr | Numărul minim de rânduri vizibile pentru aria textului. |
| onChange | funcție | Callback function triggered when the text area content changes |
| text sugestiv | șir | Placeholder text displayed when the text area is empty |
| valoare | șir | Valoarea curentă a câmpului de text |