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 сабмита по нажатии кнопки.