Свойства текста

Список свойств

У элемента 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

Репозиторий DivKit