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>