Ввод текста
Позволяет пользователям вводить и редактировать текст.- Использование
- Свойства
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}
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Необязательное имя для дополнительной стилизации |
| метка | строка | Представляет метку для ввода |
| onChange | функция | Функция, вызываемая при изменении значения ввода |
| полнаяШирина | логическое | Указывает, должен ли ввод занимать 100% ширины |
| отключитьГорячиеКлавиши | логическое | Указывает, активированы ли горячие клавиши для ввода |
| ошибка | строка | Представляет сообщение об ошибке, которое будет отображаться. При наличии добавляет значок ошибки с правой стороны ввода |
| приНажатииКлавиши | функция | Вызывается, когда клавиша нажата, пока поле ввода сфокусировано. Получает React.KeyboardEvent в качестве аргумента |
| Правая иконка | ИконкаКомпонент | Опциональный компонент иконки, отображаемый с правой стороны ввода |
Autosize Text Input
Компонент ввода текста, автоматически регулирующий свою высоту в зависимости от содержимого.- Использование
- Свойства
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: "
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| приПроверке | функция | Функция обратного вызова, которую вы хотите активировать при проверке ввода пользователем |
| минСтроки | число | Минимальное количество строк для текстовой области |
| заполнитель | строка | Текст подсказки, который вы хотите отобразить, когда текстовая область пуста |
| приФокусе | функция | Функция обратного вызова, которую вы хотите активировать, когда текстовая область получает фокус |
| вариант | строка | Вариант ввода. Опции включают: по умолчанию, иконка и кнопка |
| заголовокКнопки | строка | Название для кнопки (актуально только для варианта кнопки) |
| значение | строка | Начальное значение для текстовой области |
Текстовая Область
Позволяет создавать многострочные вводы текста.- Использование
- Свойства
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=""
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| отключено | логическое | Указывает, отключена ли текстовая область |
| минСтроки | число | Минимальное количество видимых строк для текстовой области. |
| onChange | функция | Функция обратного вызова, вызываемая при изменении содержимого текстовой области |
| заполнитель | строка | Текст метки, отображаемый, когда текстовая область пуста |
| значение | строка | Текущее значение текстовой области |