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

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

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

• поле ввода текста;
• поле ввода числа;
• многострочное поле ввода;
• поле ввода с маской.

Документация API Спецификация Axure

Тип поля ввода

В случаях, когда фон поля ввода отличается от фона по умолчанию, поле отображается с заливкой и горизонтальными отступами от границ. В остальных случаях поле ввода прозрачное и без горизонтальных отступов.

<Controls.input:Text 
    bind:value="_value"/>
<Controls.input:Text
    bind:value="_value"
    contrastBackground="true"/>

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

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

Чтобы управлять состоянием поля ввода из кода, с помощью директивы bind свяжите значение опции value со свойством контрола.

<Controls.input:Text 
    bind:value="_value"/>
<Controls.input:Text 
    value="text"
    readOnly="{{true}}"/>

Цвета

Цвет границы поля ввода задается в опции borderStyle.

<Controls.input:Text 
    bind:value="_value"
    borderStyle="secondary"/>

Цвет текста внутри поля ввода задается в опции fontColorStyle.

<Controls.input:Text
    fontColorStyle="link"
    bind:value="_linkValue"
    placeholder="{{_placeholder}}"/>
<Controls.input:Text 
    fontColorStyle="primary"
    bind:value="_primaryValue"
    placeholder="{{_placeholder}}"/>

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

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

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

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

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

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

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