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

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

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