TextArea
Отображает текстовое поле
В зависимости от значения свойства View имеет следующие варианты отображения:
- Default: ввод текстовой и нформации в поле фиксированного размера;
- AutoExpand: автоматическое изменение высоты компонента в зависимости от вводимых данных;
- Custom: изменение высоты компонента пользователем вручную.
В зависимости от значения свойства Mode возвращает в OutputValue следующие значения: - ReturnString: тип String;
- ReturnArray: тип Array, содержащий массив непустых строк.
<TextArea
Model-var="foo3"
Label="View=Default"
Text=""
/>
Свойства
| Имя | Описание | Тип | Значение по умолчанию | Возможные значения |
|---|---|---|---|---|
| Autofocus | Признак установки фокуса на компонент | boolean | False | |
| Badge | Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет) | any | ||
| CSS | Массив строк-классов CSS-стилей компонента | array | ||
| CombineConfig | Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную | object | ||
| DataHint | Подсказка к компоненту | string | ||
| Disabled | Признак запрета на редактирование компонента | boolean | False | |
| Error | Тескт ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки | boolean | False | |
| ErrorMessage | Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error | string | ||
| Focused | Признак фокусировки на компоненте | boolean | False | |
| Hidden | Признак состояния компонента Скрыт | boolean | False | |
| HighlightError | Признак подсвечивания ошибки | boolean | True | |
| Hint | Подсказка над компонентом | string | ||
| HintPosition | Сторона — правая или левая — для отображения подсказки | enum | right | left - Слеваright - Справаtop - Сверхуbottom - СнизуtopRight - Сверху справаtopLeft - Сверху слеваbottomRight - Снизу справаbottomLeft - Снизу слева |
| Id | Идентификатор компонента для навигации к нему на HTML-странице | string | ||
| Label | Надпись на компоненте | string | ||
| MaxLength | Максимальная длина вводимой строки | number | 30 | |
| MinHeight | Минимальная высота компонента | string | ||
| Mode | Формат возвращаемых данных | enum | ReturnString | ReturnString - OutputValue имеет тип StringReturnArray - OutputValue имеет тип Array, содержащий массив непустых строк |
| Model | Псевдоним свой ств Value и OutputValue | any | ||
| NoWriteOnInit | Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента | boolean | False | |
| OnBlur | Параметры команды, отправляемой при потере фокуса компонентом | undefined | ||
| OnChange | Параметры команды, отправляемой при изменении компонента, например, при вводе текста, выборе из списка | undefined | ||
| OnClick | Обработчик события нажатия кнопки мыши | undefined | ||
| OnDelay | Параметры команды, отправляемой по истечении секунды (для предотвращения ложного срабатывания обработчика события) после последнего изменения модели данных | undefined | ||
| OnEnterKeyDown | Параметры команды, отправляемой по нажатию Enter | undefined | ||
| OnKeyDown | Обработчик события KeyDown | undefined | ||
| OnKeyUp | Обработчик события KeyUp | undefined | ||
| OnMouseDown | Обработчик события MouseDown | undefined | ||
| OnMouseEnter | Обработчик события MouseEnter | undefined | ||
| OnMouseLeave | Обработчик события MouseLeave | undefined | ||
| OnMouseMove | Обработчик события MouseMove | undefined | ||
| OnMouseOut | Обработчик события MouseOut | undefined | ||
| OnMouseOver | Обработчик события MouseOver | undefined | ||
| OnMouseUp | Обработчик события MouseUp | undefined | ||
| OnUnmount | Обработчик события Unmount | undefined | ||
| OutputState | Имя переменной для записи информации, относящейся к состоянию компонента, но не относящейся к данным | any | ||
| OutputValue | Привязка отрисованного компонента к модели | any | ||
| ReadOnly | Признак запрета на редактирование компонента c возможностью копирования содержимого | boolean | False | |
| Required | Признак обязательности заполнения. Не влияет на валидацию, отображает звездочку справа от надписи | boolean | False | |
| Slot | Метка для динамического добавления другого компонента по его идентификатору | string | ||
| Text | Заполнитель (Placeholder) | string | ||
| Tooltip | Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка | any | ||
| TraceId | Идентифик атор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента | string | ||
| Validation | Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо Validation рекомендуется использовать свойство Error | boolean | False | |
| Value | Привязка модели к отрисованному компоненту | any | ||
| View | Размер и масштабирование компонента | enum | Default | Default - Используется для ввода пользователем текстовой информации в поле фиксированного размераAutoExpand - Высота компонента может быть настроена на автоматическое изменение размера в зависимости от вводимых пользователем данныхCustom - Высота компонента может быть изменена пользователем вручную |
| Visible | Признак инверсии состояния компонента Скрыт | boolean | True | |
| WriteMode | Имя события, по которому меняется значение переменной состояния (экранной формы), переданной в качестве OutputValue | enum | - Режим ввода без контроля состояния компонента |
Примеры
Данные:
"foo": ""
}
JSX:
<Form AutoMargin={16}>
<TextArea
Model-var="foo"
Label="View=Default"
Text="Placeholder"
/>
<TextArea
Model-var="foo1"
Label="View=AutoExpand"
View="AutoExpand"
Text="Placeholder"
/>
<TextArea
Model-var="foo2"
Label="View=Custom"
Error={foo => {
if (foo.length < 3) return 'Длина foo меньше 3';
if (foo.length < 4) return 'Длина foo меньше 4';
if (foo.length < 5) return 'Длина foo меньше 5';
}}
HighlightError={true}
View="Custom"
Text="Placeholder"
/>
<TextArea
Model-var="foo3"
Label="Disabled"
Disabled={true}
Text="Placeholder"
/>
<TextArea
Model-var="foo4"
Label="ReadOnly"
ReadOnly={true}
/>
</Form>