Свойства текста
Список свойств
У элемента text для управления отображением текста используются свойства:
font_size
— размер;font_weight
— начертание;text_color
— цвет;letter_spacing
— расстояние между буквами;line_height
— высота строки;max_lines
— максимальное количество строк;text_alignment_vertical
/text_alignment_horizontal
— типы выравнивания;strike
— зачеркивание;underline
— подчеркивание.
Посмотреть интерактивный пример
Обрезка текста
Когда текст выходит за ограничения по количеству строк, то он обрезается.
max_lines
— максимальное количество строк, которые не будут обрезаны при выходе за ограничения.min_hidden_lines
— минимальное число обрезанных строк при выходе за ограничения.ellipsis
— маркер обрезки текста при выходе за ограничения.
По умолчанию будут добавлены три точки, но маркер обрезки можно предопределить через ellipsis
.
Если общее число строк текста меньше или равно сумме max_lines
+ min_hidden_lines
, то текст не обрезается. Если общее число строк текста больше суммы, то текст обрезается на max_lines
строк.
Пример. Параметр
max_lines = 3
, аmin_hidden_lines = 4
. Общее число строк текста — 7. Текст не обрежется.
Применить свойство к части текста
Чтобы поменять форматирование только части текста, используйте свойства ranges
и images
:
images
— указанный символ заменяется на картинку;ranges
— промежуток, на который надо применить указанное форматирование. Нужно указать начало (начиная с 0) и конец промежутка. Несколькоrange
могут пересекаться, при этом будут применены указанные свойства для всех промежутков. Выделенную часть текста можно сделать кликабельной с помощью действий.
Посмотреть интерактивный пример
Например, с помощью свойства range
в текстовом блоке новости можно применить одно форматирование для текста и другое — для названия источника
Посмотреть интерактивный пример
Поле ввода
Элемент input представляет собой поле для ввода текста. Имеет те же свойства, что и элемент text, а также несколько отдельных свойств:
hint_text
— текст подсказки, который будет отображаться в пустом поле ввода.hint_color
— цвет подсказки.highlight_color
— цвет выделения текста. Если значение не задано, будет использован цвет, установленный на клиенте.native_interface
— объект. Содержит единственное полеcolor
— цвет линии под текстом в поле ввода.keyboard_type
— тип клавиатуры. Поддерживаются следующие типы:single_line_text
multi_line_text
phone
number
email
uri
select_all_on_focus
— выделение введенного текста при получении фокуса.mask
— маска для ввода текста по заданному шаблону.validators
— валидатор, который проверяет значение поля на соответствие заданным условиям.
Маска
Текст с фиксированным количеством символов
Для настройки используются поля:
always_visible
— включает отображение маски в пустом поле ввода.raw_text_variable
— переменная, в которой хранится необработанный пользовательский ввод.pattern
— строка, которая задает шаблон для ввода текста. Например, для телефонного номера можно использовать шаблон+7 (###) ###-##-##
.pattern_elements
— массив, описывающий символы, вместо которых может быть подставлен пользовательский ввод.key
— элемент, вместо которого должен быть подставлен пользовательский ввод. В примере с номером нужно расшифровать символ#
.placeholder
— символ или строка, которые будут отображаться в пустом поле ввода.regex
— регулярное выражение для валидации вводимого символа.
Подробное описание параметров маски с фиксированным количеством символов приведено в справочнике элементов.
Пример кода
"mask": {
"type": "fixed_length",
"pattern": ...,
"raw_text_variable": ...,
"pattern_elements": [
{
"key": ... ,
"regex": ... ,
"placeholder": ...
}
],
"always_visible": ...
}
Валютные значения в заданном региональном формате
Для настройки используются поля:
raw_text_variable
— переменная, в которой хранится необработанный пользовательский ввод.locale
— тег языка по стандарту IETF BCP 47, которому должен соответствовать формат валюты. Если язык не задан, он будет определен автоматически.
Подробное описание параметров маски для валютных значений приведено в справочнике элементов.
Пример кода
"mask": {
"type": "currency",
"raw_text_variable": ... ,
"locale": ...
}
Номера телефонов c динамическим определением регионального формата
Для настройки используются поля:
always_visible
— включает отображение маски в пустом поле ввода.raw_text_variable
— переменная, в которой хранится необработанный пользовательский ввод.
Подробное описание параметров маски для номеров телефонов приведено в справочнике элементов.
Пример кода
"mask": {
"type": "phone",
"raw_text_variable": ...,
"always_visible": ...
}
Валидаторы
На основе регулярных выражений
Для настройки используются поля:
pattern
— регулярное выражение, которому должно соответствовать значение поля.allow_empty
— определяет, является ли пустое поле корректным.label_id
— ID текстового элемента, который содержит сообщение об ошибке. Также будет использовано для поддержки доступности.variable
— имя переменной, в которой хранится результат вычисления выражения.
Подробное описание параметров валидатора на основе регулярных выражений приведено в справочнике элементов.
Пример кода
{
"type": "regex",
"pattern": ...,
"allow_empty": ...,
"label_id": ...,
"variable": ...
}
На основе вычисляемых выражений DivKit
Для настройки используются поля:
pattern
— вычисляемое выражение для определения корректности значения поля.allow_empty
— определяет, является ли пустое поле корректным.label_id
— ID текстового элемента, который содержит сообщение об ошибке. Также будет использовано для поддержки доступности.variable
— имя переменной, в которой хранится результат вычисления выражения.
Подробное описание параметров валидатора на основе вычисляемых выражений приведено в справочнике элементов.
Пример кода
"validators": [
{
"type": "expression",
"condition": ...,
"allow_empty": ...,
"label_id": ...,
"variable": ...
}
]
Узнать больше
Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.
Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.