Базовые поля ввода
Поля ввода предназначены для заполнения их данными разных форматов, а также для редактирования введенных данных.
К базовым полям ввода относятся:
Документация API Спецификация Axure
Тип поля ввода
В случаях, когда фон поля ввода отличается от фона по умолчанию, поле отображается с заливкой и горизонтальными отступами от границ. В остальных случаях поле ввода прозрачное и без горизонтальных отступов.
<Controls.input:Text
bind:value="_value"/>
<Controls.input:Text
bind:value="_value"
contrastBackground="true"/>
<details style="margin-top: 10px; margin-bottom: 10px; color: #313E78; cursor: pointer; padding: 12px; border: 1px solid #009dd9;">
Описание параметра | С прозрачным фоном | С контрастным фоном |
---|---|---|
Горизонтальный отступ | - | @offset_2xs |
Цвет фона | прозрачный | @background-color |
Текущее состояние поля ввода
Текущее состояние поля ввода задается в опции value.
Чтобы управлять состоянием поля ввода из кода, с помощью директивы bind свяжите значение опции value
со свойством контрола.
<Controls.input:Text
bind:value="_value"/>
<Controls.input:Text
value="text"
readOnly="{{true}}"/>
<details style="margin-top: 10px; margin-bottom: 10px; color: #313E78; cursor: pointer; padding: 12px; border: 1px solid #009dd9;">
Описание параметра | Поле ввода |
---|---|
Цвет нижней линии | @readonly_border-color |
Цвета
Цвет границы поля ввода задается в опции borderStyle.
<Controls.input:Text
bind:value="_value"
borderStyle="secondary"/>
<details style="margin-top: 10px; margin-bottom: 10px; color: #313E78; cursor: pointer; padding: 12px; border: 1px solid #009dd9;">
Описание параметра | По умолчанию | Success | Secondary | Warning |
---|---|---|---|---|
Толщина нижней линии | @border-thickness | |||
Цвет нижней линии в покое | @unaccented_border-color | @success_border-color | @secondary_border-color | @warning_border-color |
Цвет нижней линии по ховеру и когда поле в фокусе | @unaccented_hover_border-color | - |
Цвет текста внутри поля ввода задается в опции fontColorStyle.
<Controls.input:Text
fontColorStyle="link"
bind:value="_linkValue"
placeholder="{{_placeholder}}"/>
<Controls.input:Text
fontColorStyle="primary"
bind:value="_primaryValue"
placeholder="{{_placeholder}}"/>
<details style="margin-top: 10px; margin-bottom: 10px; color: #313E78; cursor: pointer; padding: 12px; border: 1px solid #009dd9;">
Описание параметра | Primary | Secondary | Success | Warning | Danger | Unaccented | Link | Label | Info | Default |
---|---|---|---|---|---|---|---|---|---|---|
Цвет текста | @primary_text-color | @secondary_text-color | @success_text-color | @warning_text-color | @danger_text-color | @unaccented_text-color | @link_text-color | @label_text-color | @info_text-color | @text-color |
Высота поля ввода
Высота поля ввода задается в опции inlineHeight.
Не рекомендуется размещать на одной линии поля ввода разной высоты.
<Controls.input:Text
bind:value="_linkValue"
inlineHeight="xs"/>
<Controls.input:Text
bind:value="_linkValue"
inlineHeight="m">
Ширина поля ввода
Ширина поля ввода задается в пикселях или в количестве символов.
<Controls.input:Text
bind:value="_value1"
attr:style="width: 200px"/>
<Controls.input:Text
bind:value="_value2"
attr:class="controls-Input__width-5ch"/>
Размер текста
Размер шрифта текста, отображаемого внутри поля ввода, задается в опции fontSize.
Допускается использование шрифтов как большего, так и меньшего размеров, но важно, чтобы размер текстового контейнера не превышал габариты поля ввода.
<Controls.input:Text
bind:value="_linkValue"
fontSize="s"/>
<Controls.input:Text
bind:value="_linkValue"
fontSize="m">
Многострочное поле ввода
Контрол позволяет вводить в поле текст в несколько строк.
Максимальное и минимальное количество строк внутри поля ввода настраивается с помощью опций maxLines и minLines, соответственно.
Опции определяют максимальную и минимальную высоту поля ввода. При вводе текста, превышающего максимальную высоту, в поле ввода появляется скролл.
<Controls.input:Area
bind:value="_value"/>
<Controls.input:Area
bind:value="_value1"
minLines="{{2}}"
maxLines="{{3}}"/>
<details style="margin-top: 10px; margin-bottom: 10px; color: #313E78; cursor: pointer; padding: 12px; border: 1px solid #009dd9;">
Описание параметра | Многострочное поле ввода |
---|---|
Толщина верхней линии | @border-thickness |
Цвет верхней линии | @separator-color |
В подвале многострочного поля ввода можно отобразить прикладной контент с помощью опции footerTemplate.
<Controls.input:Area
bind:value="_value1"/>
<Controls.input:Area
bind:value="_value2"
maxLines="{{3}}">
<ws:footerTemplate>
<Controls.buttons:Button
caption="Прикрепить"
viewMode="link"
icon="icon-TFAttach"
iconSize="s"
iconStyle="secondary"/>
</ws:footerTemplate>
</Controls.input:Area>
Валидация
Для валидации значений контролов применяются специальные контейнеры-обертки. Настройка валидации вводимых значений описана в статье.
<Controls.validate:InputContainer name="myValidateContainer">
<ws:content>
<Controls.input:Text bind:value="_value" />
</ws:content>
<ws:validators>
<ws:Array>
<ws:Function value="{{_infoEmail}}">Controls/validate:isRequired</ws:Function>
</ws:Array>
</ws:validators>
</Controls.validate:InputContainer>
Статус валидации
Валидация данных, вводимых в поле ввода, проводится с помощью опции validationStatus. Поле ввода передает валидатору значение опции value, далее валидатор возвращает полю ввода результат в виде значения опции validationStatus.
В случае ошибки будет изменен стиль отображения поля, появится всплывающая подсказка с сообщением об ошибке.
<Controls.input:Text
validationStatus="valid"
bind:value="_validValue"
placeholder="{{_placeholder}}"/>
<Controls.input:Text
validationStatus="invalid"
bind:value="_invalidValue"
placeholder="{{_placeholder}}"/>
<Controls.input:Text
validationStatus="invalidAccent"
contrastBackground="{{true}}"
bind:value="_invalidAccentValue"
placeholder="{{_placeholder}}"/>
Валидация многострочного поля ввода проводится аналогично.
<Controls.input:Area
validationStatus="valid"
minLines="{{4}}"
maxLines="{{4}}"/>
<Controls.input:Area
validationStatus="invalid"
minLines="{{4}}"
maxLines="{{4}}"/>
<Controls.input:Area
validationStatus="invalidAccent"
contrastBackground="{{true}}"
minLines="{{4}}"
maxLines="{{4}}"/>
Выравнивание текста в поле ввода
Выравнивание текста, введенного в поле, настраивается в опции textAlign.
<Controls.input:Text
textAlign="left"
bind:value="_leftValue"/>
<Controls.input:Text
textAlign="right"
bind:value="_rightValue"/>
<Controls.input:Text
textAlign="center"
bind:value="_centerValue"/>
Пользовательский шаблон контента
Справа и слева от текста в поле ввода можно отобразить пользовательский контент с помощью опций rightFieldTemplate и leftFieldTemplate, соответственно.
<Controls.input:Text bind:value="_value2">
<ws:leftFieldTemplate>
<div class="controls-icon icon-TFAttach controlsDemo__icon_active controlsDemo-FieldTemplate__icon
controls-icon_style-secondary controls-icon_size-default"></div>
</ws:leftFieldTemplate>
</Controls.input:Text>
<Controls.input:Text bind:value="_value1">
<ws:rightFieldTemplate>
<div class="controls-icon icon-NewSmile controlsDemo__icon_active controlsDemo-FieldTemplate__icon
controls-icon_style-secondary controls-icon_size-default"></div>
</ws:rightFieldTemplate>
</Controls.input:Text>
Индикатор поля ввода
Внутри поля ввода можно отобразить цветной индикатор с помощью опции tagStyle.
<Controls.input:Text
tagStyle="primary"
bind:value="_primaryValue"
placeholder="{{_placeholder}}"/>
<Controls.input:Text
tagStyle="secondary"
bind:value="_secondaryValue"
placeholder="{{_placeholder}}"/>
<details style="margin-top: 10px; margin-bottom: 10px; color: #313E78; cursor: pointer; padding: 12px; border: 1px solid #009dd9;">
Описание параметра | Info | Danger | Primary | Success | Warning | Secondary |
---|---|---|---|---|---|---|
Цвет индикатора | @info_contrast_background-color | @danger_contrast_background-color | @primary_contrast_background-color | @success_contrast_background-color | @warning_contrast_background-color | @seconary_contrast_background-color |
Отображение подсказки в пустом поле ввода
Текст подсказки, отображаемой в поле до того, как пользователь введет значение, задается в опции placeholder. В качестве значения опция может принимать шаблон.
<Controls.input:Text/>
<Controls.input:Text
placeholder="Enter your name"/>
<Controls.input:Text bind:value="_value">
<ws:placeholder>
<span>Enter or <Controls.buttons:Button
viewMode="link"
caption="paste generated"
fontColorStyle="label"
on:click="_generatePassword()"/> password
</span>
</ws:placeholder>
</Controls.input:Text>
Подсказка в поле ввода может отображаться всегда или только в случаях, когда контрол находится в режиме редактирования. Видимость подсказки настраивается в опции placeholderVisibility.
<Controls.input:Text
readOnly="{{true}}"
placeholderVisibility="editable"
placeholder="Enter your name"/>
<Controls.input:Text
readOnly="{{true}}"
placeholderVisibility="empty"
placeholder="Enter your name"/>
<Controls.input:Text
readOnly="{{true}}"
placeholderVisibility="editable"
value="Hello world"
placeholder="Enter your name"/>
<details style="margin-top: 10px; margin-bottom: 10px; color: #313E78; cursor: pointer; padding: 12px; border: 1px solid #009dd9;">
Описание параметра | Подсказка |
---|---|
Цвет текста подсказки | @placeholder-color_inputText |
Видимость границы поля ввода
Видимость границ поля ввода настраивается в опции borderVisibility.
<Controls.input:Text
borderVisibility="partial"
placeholder="borderVisibility=partial"/>
<Controls.input:Text
borderVisibility="hidden"
placeholder="borderVisibility=hidden"/>
В многострочном поле ввода опция дополнительно принимает значение bottom.
<Controls.input:Area
borderVisibility="partial"
minLines="{{4}}"
maxLines="{{4}}"/>
<Controls.input:Area
borderVisibility="bottom"
minLines="{{4}}"
maxLines="{{4}}"/>
<Controls.input:Area
borderVisibility="hidden"
minLines="{{4}}"
maxLines="{{4}}"/>