Базовые поля ввода

Поля ввода предназначены для заполнения их данными разных форматов, а также для редактирования введенных данных.

К базовым полям ввода относятся:

Документация 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
</details>

Текущее состояние поля ввода

Текущее состояние поля ввода задается в опции 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
</details>

Цвета

Цвет границы поля ввода задается в опции 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;">Спецификация
Описание параметраПо умолчаниюSuccessSecondaryWarning
Толщина нижней линии@border-thickness
Цвет нижней линии в покое@unaccented_border-color@success_border-color@secondary_border-color@warning_border-color
Цвет нижней линии по ховеру и когда поле в фокусе@unaccented_hover_border-color-
</details>

Цвет текста внутри поля ввода задается в опции 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;">Спецификация
Описание параметраPrimarySecondarySuccessWarningDangerUnaccentedLinkLabelInfoDefault
Цвет текста@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
</details>

Высота поля ввода

Высота поля ввода задается в опции 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
</details>

В подвале многострочного поля ввода можно отобразить прикладной контент с помощью опции 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>

Валидация

Валидация данных, вводимых в поле ввода, проводится с помощью опции 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;">Спецификация
Описание параметраInfoDangerPrimarySuccessWarningSecondary
Цвет индикатора@info_contrast_background-color@danger_contrast_background-color@primary_contrast_background-color@success_contrast_background-color@warning_contrast_background-color@seconary_contrast_background-color
</details>

Отображение подсказки в пустом поле ввода

Текст подсказки, отображаемой в поле до того, как пользователь введет значение, задается в опции 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;">Спецификация
Описание параметраПодсказка
Цвет текста подсказки@label_text-color, 60%
</details>

Видимость границы поля ввода

Видимость границ поля ввода настраивается в опции 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}}"/>