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("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}
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
| etichetă | string | Reprezintă eticheta pentru intrare |
| onChange | funcție | Funcția apelată atunci când valoarea de intrare se modifică |
| lățimeCompletă | boolean | Indică dacă intrarea ar trebui să ocupe 100% din lățime |
| dezactiveazăTaste | 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 |
| Pictograma Dreapta | ComponentaIcoana | O componentă de pictogramă opțională afișată în partea dreaptă a intrării |
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("onValidate function fired")}
minRows={1}
placeholder="Write a comment"
onFocus={() => console.log("onFocus function fired")}
variant="icon"
buttonTitle
value="Task: "
/>
);
};
| Proprietăți | Tip | Descriere |
|---|---|---|
| onValidate | funcție | Funcția de apel invers pe care doriți să o declanșați atunci când utilizatorul validează intrarea |
| minute | 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 |
| buton Titlu | string | Titlul pentru buton (aplicabil doar pentru varianta butonului) |
| valoare | string | Valoarea inițială pentru aria textului |
Zonă text
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ă |
| minute | număr | Numărul minim de rânduri vizibile pentru aria textului. |
| onChange | funcție | Funcția de apelare este declanșată atunci când zona de text se modifică |
| text sugestiv | șir | Text substitut afișat atunci când zona de text este goală |
| valoare | șir | Valoarea curentă a câmpului de text |