Textové pole
Umožňuje uživatelům zadávat a upravovat text.- Použití
- Vlastnosti
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}
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| className | řetězec | Volitelný název pro další stylování |
| štítek | řetězec | Reprezentuje štítek pro vstup |
| onChange | funkce | Funkce, která se zavolá, když se změní hodnota vstupu |
| fullWidth | booleovská hodnota | Udává, zda by měl vstup zabírat 100 % šířky |
| disableHotkeys | booleovská hodnota | Indikuje, zda jsou pro vstup povoleny horké klávesy |
| chyba | řetězec | Reprezentuje chybovou zprávu, která se má zobrazit. Pokud je poskytnuta, také přidává ikonu chyby na pravou stranu vstupu |
| onKeyDown | funkce | Volá se při stisknutí klávesy, když je vstupní pole ve fokusu. Přijímá React.KeyboardEvent jako argument |
| Pravá Ikona | Ikonová komponenta | Volitelná komponenta ikony zobrazená na pravé straně vstupu |
Automatická velikost vstupního textu
Textová vstupní komponenta, která automaticky přizpůsobuje svou výšku na základě obsahu.- Použití
- Vlastnosti
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: "
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| onValidate | funkce | Callback funkce, kterou chcete spustit, když uživatel potvrdí vstup |
| minRows | číslo | Minimální počet řádků pro textovou oblast |
| zástupný text | řetězec | Náhradní text, který chcete zobrazit, když je textová oblast prázdná |
| onFocus | funkce | Callback funkce, kterou chcete spustit, když textová oblast získá fokus |
| varianta | řetězec | Varianta vstupu. Možnosti zahrnují: výchozí, ikona, a tlačítko |
| buttonTitle | řetězec | Název pro tlačítko (pouze pro variantu tlačítka) |
| hodnota | řetězec | Úvodní hodnota pro textovou oblast |
Textová Oblast
Umožňuje vytvoření víceřádkových textových vstupů.- Použití
- Vlastnosti
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=""
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| neaktivní | booleovská hodnota | Naznačuje, zda je textová oblast deaktivovaná |
| minRows | číslo | Minimální počet viditelných řádků pro textovou oblast. |
| onChange | funkce | Callback funkce spuštěná při změně obsahu textové oblasti |
| zástupný text | řetězec | Zástupný text zobrazený, když je textová oblast prázdná |
| hodnota | řetězec | Aktuální hodnota textové oblasti |