Text properties

List of properties

The text element uses the following properties to control text display:

• font_size: Size.
• font_weight: Weight.
• text_color: Color.
• letter_spacing: Spacing between letters.
• line_height: Line height.
• max_lines: Maximum number of lines.
• text_alignment_vertical/text_alignment_horizontal: Alignment types.
• strike: Strikethrough.
• underline: Underline.

Text cropping

Any text that goes outside the limit on the number of lines is cropped.

• max_lines: Maximum number of lines that won't be cropped when exceeding the limit.
• min_hidden_lines: Minimum number of cropped lines when exceeding the limit.
• ellipsis: Marker for cropping text when exceeding the limit.

By default, three dots are used, but the crop marker can be predefined via ellipsis.

If the total number of text lines is less than or equal to the sum of max_lines + min_hidden_lines, the text isn't cropped. If the total number of text lines exceeds this sum, the text is cropped to max_lines lines.

Example. Suppose max_lines = 3 and min_hidden_lines = 4. The total number of text lines is 7. The text won't be cropped.

Applying a property to a part of the text

To change the formatting of a part of a text, use the ranges and images properties:

• images: Replace the specified character with an image.
• ranges: Range for applying the specified formatting. You need to specify the start (starting from 0) and the end of the range. Multiple ranges can overlap, and the specified properties will be applied to all the ranges. You can make a selected part of the text clickable using actions.

For example, you can apply one formatting to the text and another one to the source name using the range property in the news text block.

Input field

The input element is a field for entering text. It has the same properties as the text element, as well as several additional properties:

• hint_text: Hint text to display in an empty input field.
• hint_color: Hint color.
• highlight_color: Text highlight color. If the value isn't set, the color set in the client will be used instead.
• native_interface: Object. It contains a single color field, which specifies the color of the input field underline.
• keyboard_type: Type of keyboard. The following types are supported:
  • single_line_text
  • multi_line_text
  • phone
  • number
  • email
  • uri
• select_all_on_focus: Highlight input text when focused.
• mask: Mask for enforcing a specific text input pattern.
• validators: Validator that checks whether the field value meets the specified conditions.

Mask

Text with a fixed number of characters

To set it up, use the following fields:

• always_visible: Display the mask when the input field is empty.
• raw_text_variable: Variable that stores raw user input.
• pattern: String specifying the text input format. For example, for a phone number, you can use the pattern +7 (###) ###-##-## .
• pattern_elements: Array defining the characters that can be substituted with user input.
  • key: Array element to substitute with user input. In the example with the phone number, you need to replace the # characters.
  • placeholder: Character or string to display in an empty input field.
  • regex: Regular expression used to validate input characters.

For a detailed description of parameters for masks with a fixed number of characters, see the element reference.

"mask": {
    "type": "fixed_length",
    "pattern": ...,
    "raw_text_variable": ...,
    "pattern_elements": [
        {
            "key": ... ,
            "regex": ... ,
            "placeholder": ...
        }
    ],
    "always_visible": ...
}

Currency values in a predefined regional format

To set it up, use the following fields:

• raw_text_variable: Variable that stores raw user input.
• locale: IETF BCP 47 language tag that the currency format must match. If no locale is specified, the system will detect it automatically.

For a detailed description of parameters for currency value masks, see the element reference.

"mask": {
    "type": "currency",
    "raw_text_variable": ... ,
    "locale": ...
}

Phone numbers with dynamic regional format recognition

To set it up, use the following fields:

• always_visible: Display the mask when the input field is empty.
• raw_text_variable: Variable that stores raw user input.

For a detailed description of parameters for phone number masks, see the element reference.

"mask": {
    "type": "phone",
    "raw_text_variable": ...,
    "always_visible": ...
}

Validators

Based on regular expressions

To set it up, use the following fields:

• pattern: Regular expression that the field value must match.
• allow_empty: Determines whether an empty field can be considered valid.
• label_id: ID of a text element containing the error message. This ID is also used for accessibility support.
• variable: Name of the variable that stores the result of the expression.

For a detailed description of parameters for validators based on regular expressions, see the element reference.

{
    "type": "regex",
    "pattern": ...,
    "allow_empty": ...,
    "label_id": ...,
    "variable": ...
}

Based on DivKit calculated expressions

To set it up, use the following fields:

• pattern: Calculated expression used to validate the value of a field.
• allow_empty: Determines whether an empty field can be considered valid.
• label_id: ID of a text element containing the error message. This ID is also used for accessibility support.
• variable: Name of the variable that stores the result of the expression.

For a detailed description of parameters for validators based on calculated expressions, see the element reference.

"validators": [
    {
        "type": "expression",
        "condition": ...,
        "allow_empty": ...,
        "label_id": ...,
        "variable": ...
    }
]

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository