text-input

Текстовое поле ввода. Используется для создания форм.

Свойства

name*: string

Имя поля. Будет передано в API при отправки формы.

formId*: string

Идентификатор формы. Поля с одинаковыми идентификаторами формы отправляются в API вместе.

placeholder: string

Текст отображаемый при пустом поле. Служит как подсказка пользователю.

initialValue: string

Исходное значение в поле при отображении экрана.

inputmode: string

По-умолчанию: text

Тип вводимого значения. Меняет вид виртуальной клавиатуры на мобильных устройствах и влияет на ассоциации подсказок ввода в браузере. Значение tel меняет и внешний вид поля для удобства ввода номера.

Возможные значения: text, decimal, tel, email, url, password

returnKeyType: KeyType

По-умолчанию: done

Вид кнопки ввода на виртуальной клавиатуре. Только в мобильном приложении.

Возможные значения: done, go, next, search, send

disabled: bool

По-умолчанию: false

Поле становится неактивным и значение неизменяемым.

multiline: bool

По-умолчанию: false

Многострочное поле.

autoFocus: bool

По-умолчанию: false

Автоматическая установка фокуса в поле ввода по отображении экрана.

autoCorrect: bool

По-умолчанию: true

Автокоррекция текста по вводу. Только в мобильном приложении.

autocapitalize: Capitalize

По-умолчанию: sentences

Параметры капитализации виртуальной клавиатуры мобильных браузерах: отключено; по предложениям; по словам; каждый символ.

Возможные значения: none, sentences, words, characters

maxLength: number

Ограничение на максимальную длину вводимого текста в символах.

onChange: Action

Действие вызываемое по вводу текста.

onReturnKeyPress: Action

По-умолчанию: onChange

Действие вызываемое по нажатию кнопки ввода. По-умолчанию вызывается то же действие что задано в onChange.

style

• width, maxWidth, minWidth
  Ширина блока. Подробнее.

• height, maxHeight, minHeight
  Высота блока. Подробнее.

• padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft
  Внутренние отступы контейнера. Подробнее.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  Внешние отступы блока. Подробнее.

• position
  Метод позиционирования блока: relative или absolute. Подробнее.

• top, right, bottom, left
  Смещение относительно исходной позиции. Подробнее.

• color
  Цвет текста. Подробнее.

• fontFamily
  Название семейства шрифта. Подробнее.

• fontSize
  Размер шрифта. Подробнее.

• fontStyle
  Возможность задать шрифту курсив. Подробнее.

• fontWeight
  Жирность шрифта. Подробнее.

• fontVariant
  Возможность задействовать моноширные цифры Подробнее.

• letterSpacing
  Междусимвольный интерфал шрифта. Подробнее.

• lineHeight
  Величина пространства отводимого на одну строку текста по высоте. Подробнее.

• textAlign
  Принцип выравнивания текста. Подробнее.

• textDecorationLine
  Добавление к тексту подчеркивания или перечёркивания. Подробнее.

• textShadowColor
  Цвет тени текста. Подробнее.

• textShadowOffset
  Смещение тени по горизонтали и вертикали. Подробнее.

• textShadowRadius
  Глубина размытия тени в пикселях. Подробнее.

• textTransform
  Преобразование текста при отображении. Подробнее.

• border
  Задание границ для блока по всем четырём сторонам: толщина стиль и цвет. Подробнее.

• borderTop, borderRight, borderBottom, borderLeft
  Задание индивидуальных границ для сторон блока: толщина и цвет. Подробнее.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Скругление углов границ. Подробнее.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Толщина границ. Подробнее.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Цвет границ. Подробнее.

• backgroundColor
  Цвет фона блока. Подробнее.

• backgroundGradient
  Градиент фона блока. Подробнее.

• opacity
  Непрозрачность всего блока с его содержимым. Подробнее.

• elevation
  Высота тени. Подробнее.

• shadowColor
  Цвет тени блока. Подробнее.

• flexBasis
  Исходный размер блока по главной оси контейнера. Подробнее.

• flexGrow
  Коэффициент роста блока по главной оси контейнера. Подробнее.

• flexShrink
  Коэффициент сжатия блока по главной оси контейнера. Подробнее.

• flex
  Задаёт поведение размера блока (рост сжатие и исходный размер) по главной оси контейнера. Подробнее.

• alignSelf
  Выравнивание конкретного блока поперёк главной оси контейнера. Подробнее.

Примеры

---

Оформление полей

Простая форма

---

Два поля ввода. Данные отправляются в API по нажатию кнопки.

Форма с автосабмитом по вводу

---

Форма с дополнительными параметрами

---

Данные отправляются в API как автоматически по их изменении так и по нажатии кнопки. В обоих случаях передаётся дополнительный параметр submitType указывающий способ отправки.

Форма с валидацией данных по вводу

---

Данные отправляются в API валидации по вводу, а в API сабмита по нажатии кнопки.