div-grid

Сетка с возможностью объединения ячеек по вертикали и горизонтали.

Параметры

Параметры Описание
column_count

int

Обязательный параметр.

Количество столбцов.

Ограничение для значения x: x >= 0.

Доступные платформы: Android, iOS, веб.

type

string

Обязательный параметр.

Значение всегда должно равняться grid.

Доступные платформы: Android, iOS, веб.

accessibility

object

Настройки доступности.

Значение имеет тип div-accessibility.

Доступные платформы: Android, iOS, веб.

action

object

Одно действие при нажатии на элемент. Не используется, если задан параметр actions.

Значение имеет тип div-action.

Доступные платформы: Android, iOS, веб.

action_animation

object

Анимация нажатия. В вебе поддерживаются только значения fade, scale, native, no_animation и set.

Значение имеет тип div-animation.

Значение по умолчанию: {"name": "fade", "start_value": 1, "end_value": 0.6, "duration": 100 }.

Доступные платформы: Android, iOS, веб.

actions

array

Несколько действий при нажатии на элемент.

Доступные платформы: Android, iOS, веб.

alignment_horizontal

string

Горизонтальное выравнивание элемента внутри родительского.

Возможные значения: left, center, right, start, end.

Доступные платформы: Android, iOS, веб.

alignment_vertical

string

Вертикальное выравнивание элемента внутри родительского.

Возможные значения: top, center, bottom, baseline.

Доступные платформы: Android, iOS, веб.

alpha

number

Устанавливает прозрачность всего элемента: 0 — полностью прозрачный, 1 — непрозрачный.

Ограничение для значения x: x >= 0.0 && x <= 1.0.

Значение по умолчанию: 1.0.

Доступные платформы: Android, iOS, веб.

animators

array

Объявление аниматоров, с помощью которых можно изменять значение переменных во времени.

Доступные платформы: Android, iOS, веб.

Список возможных значений:

  • div-color-animator
  • div-number-animator
  • background

    array

    Фон элемента. Может содержать несколько слоев.

    Доступные платформы: Android, iOS, веб.

    Список возможных значений:

  • div-linear-gradient
  • div-radial-gradient
  • div-image-background
  • div-solid-background
  • div-nine-patch-background
  • border

    object

    Рамка элемента.

    Значение имеет тип div-border.

    Доступные платформы: Android, iOS, веб.

    column_span

    int

    Объединяет ячейки в столбце элемента grid.

    Ограничение для значения x: x >= 0.

    Доступные платформы: Android, iOS, веб.

    content_alignment_horizontal

    string

    Выравнивание содержимого сетки по горизонтали.

    Возможные значения: left, center, right, start, end.

    Значение по умолчанию: start.

    Доступные платформы: Android, iOS, веб.

    content_alignment_vertical

    string

    Выравнивание содержимого сетки по вертикали.

    Возможные значения: top, center, bottom, baseline.

    Значение по умолчанию: top.

    Доступные платформы: Android, iOS, веб.

    disappear_actions

    array

    Действия при исчезновении элемента с экрана.

    Доступные платформы: Android, iOS, веб.

    doubletap_actions

    array

    Действие при двойном нажатии на элемент.

    Доступные платформы: Android, iOS, веб.

    extensions

    array

    Расширения для дополнительной обработки элемента. Список расширений см. в разделе Кастомизация.

    Доступные платформы: Android, iOS, веб.

    focus

    object

    Параметры при фокусировке на элементе или потере фокуса.

    Значение имеет тип div-focus.

    Доступные платформы: Android, iOS, веб.

    functions

    array

    Пользовательские функции.

    Доступные платформы: Android, iOS, веб.

    height

    object

    Высота элемента. Для Android: если в этом или в дочернем элементе есть текст, укажите высоту в sp, чтобы элемент масштабировался вместе с текстом. Подробнее о единицах измерения размера в разделе Верстка внутри карточки.

    Значение имеет тип div-size.

    Значение по умолчанию: {"type": "wrap_content"}.

    Доступные платформы: Android, iOS, веб.

    Список возможных значений:

  • div-fixed-size
  • div-match-parent-size
  • div-wrap-content-size
  • hover_end_actions

    array

    Действия, выполняемые после наведения на элемент. Доступны на платформах, поддерживающих указывающие устройства (мышь, стилус и т.д.).

    Доступные платформы: веб.

    hover_start_actions

    array

    Действия, выполняемые при наведении на элемент. Доступны на платформах, поддерживающих указывающие устройства (мышь, стилус и т.д.).

    Доступные платформы: веб.

    id

    string

    Идентификатор элемента. На iOS используется в качестве accessibilityIdentifier.

    Доступные платформы: Android, iOS, веб.

    items

    array

    Содержимое.

    Доступные платформы: Android, iOS, веб.

    Список возможных значений:

  • div-image
  • div-gif-image
  • div-text
  • div-separator
  • div-container
  • div-grid
  • div-gallery
  • div-pager
  • div-tabs
  • div-state
  • div-custom
  • div-indicator
  • div-slider
  • div-switch
  • div-input
  • div-select
  • div-video
  • layout_provider

    object

    Предоставляет данные о реальном размере элемента.

    Значение имеет тип div-layout-provider.

    Доступные платформы: Android, iOS, веб.

    longtap_actions

    array

    Действие при долгом нажатии на элемент. Не работает на устройствах без сенсорного экрана.

    Доступные платформы: Android, iOS, веб.

    margins

    object

    Внешние отступы от рамки элемента.

    Значение имеет тип div-edge-insets.

    Доступные платформы: Android, iOS, веб.

    paddings

    object

    Внутренние отступы от рамки элемента.

    Значение имеет тип div-edge-insets.

    Доступные платформы: Android, iOS, веб.

    press_end_actions

    array

    Действия, выполняемые после нажатия на элемент.

    Доступные платформы: веб.

    press_start_actions

    array

    Действия, выполняемые в начале нажатия на элемент.

    Доступные платформы: веб.

    reuse_id

    string

    ID для структуры div-объекта. Используется для более оптимального переиспользования блоков. См. переиспользование блоков.

    Доступные платформы: Android, iOS.

    row_span

    int

    Объединяет ячейки в строке элемента grid.

    Ограничение для значения x: x >= 0.

    Доступные платформы: Android, iOS, веб.

    selected_actions

    array

    Список действий, которые будут выполнены при выборе элемента в пейджере.

    Доступные платформы: Android, iOS, веб.

    tooltips

    array

    Привязанные к элементу всплывающие подсказки. Подсказка может быть показана по div-action://show_tooltip?id=, скрыта по div-action://hide_tooltip?id=, где id — id подсказки.

    Доступные платформы: Android, iOS, веб.

    transform

    object

    Применяет к элементу переданное преобразование. Тот контент, который не поместится в исходную область просмотра, будет обрезан.

    Значение имеет тип div-transform.

    Доступные платформы: Android, iOS, веб.

    transition_change

    object

    Анимация изменения. Воспроизводится при изменении положения или размера элемента в новой верстке.

    Значение имеет тип div-change-transition.

    Доступные платформы: Android, iOS, веб.

    Список возможных значений:

  • div-change-set-transition
  • div-change-bounds-transition
  • transition_in

    object

    Анимация появления. Воспроизводится при появлении элемента с новым id. Подробнее о концепции переходов в разделе Анимация перехода.

    Значение имеет тип div-appearance-transition.

    Доступные платформы: Android, iOS, веб.

    Список возможных значений:

  • div-appearance-set-transition
  • div-fade-transition
  • div-scale-transition
  • div-slide-transition
  • transition_out

    object

    Анимация исчезания. Воспроизводится при исчезании элемента в новой верстке.

    Значение имеет тип div-appearance-transition.

    Доступные платформы: Android, iOS, веб.

    Список возможных значений:

  • div-appearance-set-transition
  • div-fade-transition
  • div-scale-transition
  • div-slide-transition
  • transition_triggers

    array

    Триггеры запуска анимации. Значение по умолчанию: [state_change, visibility_change].

    Массив должен быть непустым.

    Доступные платформы: Android, iOS, веб.

    variable_triggers

    array

    Триггеры изменения переменных внутри элемента.

    Доступные платформы: Android, iOS, веб.

    variables

    array

    Объявление переменных, которые могут использоваться внутри элемента. Переменные, объявленные в данном массиве, могут использоваться только внутри самого элемента и его дочерних элементов.

    Доступные платформы: iOS, веб, Android.

    Список возможных значений:

  • string_variable
  • number_variable
  • integer_variable
  • boolean_variable
  • color_variable
  • url_variable
  • dict_variable
  • array_variable
  • visibility

    string

    Видимость элемента.

    Возможные значения: visible, invisible, gone.

    Значение по умолчанию: visible.

    Доступные платформы: Android, iOS, веб.

    visibility_action

    object

    Трекинг видимости одного элемента. Не используется, если задан параметр visibility_actions.

    Значение имеет тип div-visibility-action.

    Доступные платформы: Android, iOS, веб.

    visibility_actions

    array

    Действия при появлении элемента на экране.

    Доступные платформы: Android, iOS, веб.

    width

    object

    Ширина элемента.

    Значение имеет тип div-size.

    Значение по умолчанию: {"type": "match_parent"}.

    Доступные платформы: Android, iOS, веб.

    Список возможных значений:

  • div-fixed-size
  • div-match-parent-size
  • div-wrap-content-size
  • JSON
    {
      type*: "grid",
      accessibility: {
        description: "string",
        hint: "string",
        is_checked: "bool_int",
        mode: "string",
        mute_after_action: "bool_int",
        state_description: "string",
        type: "string"
      },
      action: {
        download_callbacks: {
          on_fail_actions: [ div-action, ... ],
          on_success_actions: [ div-action, ... ]
        },
        is_enabled: "bool_int",
        log_id*: "string",
        log_url: "string",
        menu_items: [
          {
            action: div-action,
            actions: [ div-action, ... ],
            text*: "string"
          },
          ...
        ],
        payload: "object",
        referer: "string",
        scope_id: "string",
        target: "string",
        typed: div-action-typed,
        url: "string"
      },
      action_animation: {
        duration: "int",
        end_value: "number",
        interpolator: "string",
        items: [ div-animation, ... ],
        name*: "string",
        repeat: div-count,
        start_delay: "int",
        start_value: "number"
      },
      actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      alignment_horizontal: "string",
      alignment_vertical: "string",
      alpha: "number",
      animators: [ div-animator, ... ],
      background: [ div-background, ... ],
      border: {
        corner_radius: "int",
        corners_radius: {
          bottom-left: "int",
          bottom-right: "int",
          top-left: "int",
          top-right: "int"
        },
        has_shadow: "bool_int",
        shadow: {
          alpha: "number",
          blur: "int",
          color: "string",
          offset*: {
            x*: {
              unit: "string",
              value*: "number"
            },
            y*: {
              unit: "string",
              value*: "number"
            }
          }
        },
        stroke: {
          color*: "string",
          unit: "string",
          width: "number"
        }
      },
      column_count*: "int",
      column_span: "int",
      content_alignment_horizontal: "string",
      content_alignment_vertical: "string",
      disappear_actions: [
        {
          disappear_duration: "int",
          download_callbacks: {
            on_fail_actions: [
              {
                download_callbacks: div-download-callbacks,
                is_enabled: "bool_int",
                log_id*: "string",
                log_url: "string",
                menu_items: [
                  {
                    action: div-action,
                    actions: [ div-action, ... ],
                    text*: "string"
                  },
                  ...
                ],
                payload: "object",
                referer: "string",
                scope_id: "string",
                target: "string",
                typed: div-action-typed,
                url: "string"
              },
              ...
            ],
            on_success_actions: [
              {
                download_callbacks: div-download-callbacks,
                is_enabled: "bool_int",
                log_id*: "string",
                log_url: "string",
                menu_items: [
                  {
                    action: div-action,
                    actions: [ div-action, ... ],
                    text*: "string"
                  },
                  ...
                ],
                payload: "object",
                referer: "string",
                scope_id: "string",
                target: "string",
                typed: div-action-typed,
                url: "string"
              },
              ...
            ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_limit: "int",
          payload: "object",
          referer: "string",
          scope_id: "string",
          typed: div-action-typed,
          url: "string",
          visibility_percentage: "int"
        },
        ...
      ],
      doubletap_actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      extensions: [
        {
          id*: "string",
          params: "object"
        },
        ...
      ],
      focus: {
        background: [ div-background, ... ],
        border: {
          corner_radius: "int",
          corners_radius: {
            bottom-left: "int",
            bottom-right: "int",
            top-left: "int",
            top-right: "int"
          },
          has_shadow: "bool_int",
          shadow: {
            alpha: "number",
            blur: "int",
            color: "string",
            offset*: {
              x*: {
                unit: "string",
                value*: "number"
              },
              y*: {
                unit: "string",
                value*: "number"
              }
            }
          },
          stroke: {
            color*: "string",
            unit: "string",
            width: "number"
          }
        },
        next_focus_ids: {
          down: "string",
          forward: "string",
          left: "string",
          right: "string",
          up: "string"
        },
        on_blur: [
          {
            download_callbacks: {
              on_fail_actions: [ div-action, ... ],
              on_success_actions: [ div-action, ... ]
            },
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            scope_id: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ],
        on_focus: [
          {
            download_callbacks: {
              on_fail_actions: [ div-action, ... ],
              on_success_actions: [ div-action, ... ]
            },
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            scope_id: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      functions: [
        {
          arguments*: [
            {
              name*: "string",
              type*: "string"
            },
            ...
          ],
          body*: "string",
          name*: "string",
          return_type*: "string"
        },
        ...
      ],
      height: div-size,
      hover_end_actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      hover_start_actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      id: "string",
      items: [ div, ... ],
      layout_provider: {
        height_variable_name: "string",
        width_variable_name: "string"
      },
      longtap_actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      margins: {
        bottom: "int",
        end: "int",
        left: "int",
        right: "int",
        start: "int",
        top: "int",
        unit: "string"
      },
      paddings: {
        bottom: "int",
        end: "int",
        left: "int",
        right: "int",
        start: "int",
        top: "int",
        unit: "string"
      },
      press_end_actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      press_start_actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      reuse_id: "string",
      row_span: "int",
      selected_actions: [
        {
          download_callbacks: {
            on_fail_actions: [ div-action, ... ],
            on_success_actions: [ div-action, ... ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          scope_id: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      tooltips: [
        {
          animation_in: {
            duration: "int",
            end_value: "number",
            interpolator: "string",
            items: [ div-animation, ... ],
            name*: "string",
            repeat: div-count,
            start_delay: "int",
            start_value: "number"
          },
          animation_out: {
            duration: "int",
            end_value: "number",
            interpolator: "string",
            items: [ div-animation, ... ],
            name*: "string",
            repeat: div-count,
            start_delay: "int",
            start_value: "number"
          },
          div*: div,
          duration: "int",
          id*: "string",
          offset: {
            x*: {
              unit: "string",
              value*: "number"
            },
            y*: {
              unit: "string",
              value*: "number"
            }
          },
          position*: "string"
        },
        ...
      ],
      transform: {
        pivot_x: div-pivot,
        pivot_y: div-pivot,
        rotation: "number"
      },
      transition_change: div-change-transition,
      transition_in: div-appearance-transition,
      transition_out: div-appearance-transition,
      transition_triggers: [ "string", ... ],
      variable_triggers: [
        {
          actions*: [
            {
              download_callbacks: {
                on_fail_actions: [ div-action, ... ],
                on_success_actions: [ div-action, ... ]
              },
              is_enabled: "bool_int",
              log_id*: "string",
              log_url: "string",
              menu_items: [
                {
                  action: div-action,
                  actions: [ div-action, ... ],
                  text*: "string"
                },
                ...
              ],
              payload: "object",
              referer: "string",
              scope_id: "string",
              target: "string",
              typed: div-action-typed,
              url: "string"
            },
            ...
          ],
          condition*: "bool_int",
          mode: "string"
        },
        ...
      ],
      variables: [ div-variable, ... ],
      visibility: "string",
      visibility_action: {
        download_callbacks: {
          on_fail_actions: [
            {
              download_callbacks: div-download-callbacks,
              is_enabled: "bool_int",
              log_id*: "string",
              log_url: "string",
              menu_items: [
                {
                  action: div-action,
                  actions: [ div-action, ... ],
                  text*: "string"
                },
                ...
              ],
              payload: "object",
              referer: "string",
              scope_id: "string",
              target: "string",
              typed: div-action-typed,
              url: "string"
            },
            ...
          ],
          on_success_actions: [
            {
              download_callbacks: div-download-callbacks,
              is_enabled: "bool_int",
              log_id*: "string",
              log_url: "string",
              menu_items: [
                {
                  action: div-action,
                  actions: [ div-action, ... ],
                  text*: "string"
                },
                ...
              ],
              payload: "object",
              referer: "string",
              scope_id: "string",
              target: "string",
              typed: div-action-typed,
              url: "string"
            },
            ...
          ]
        },
        is_enabled: "bool_int",
        log_id*: "string",
        log_limit: "int",
        payload: "object",
        referer: "string",
        scope_id: "string",
        typed: div-action-typed,
        url: "string",
        visibility_duration: "int",
        visibility_percentage: "int"
      },
      visibility_actions: [
        {
          download_callbacks: {
            on_fail_actions: [
              {
                download_callbacks: div-download-callbacks,
                is_enabled: "bool_int",
                log_id*: "string",
                log_url: "string",
                menu_items: [
                  {
                    action: div-action,
                    actions: [ div-action, ... ],
                    text*: "string"
                  },
                  ...
                ],
                payload: "object",
                referer: "string",
                scope_id: "string",
                target: "string",
                typed: div-action-typed,
                url: "string"
              },
              ...
            ],
            on_success_actions: [
              {
                download_callbacks: div-download-callbacks,
                is_enabled: "bool_int",
                log_id*: "string",
                log_url: "string",
                menu_items: [
                  {
                    action: div-action,
                    actions: [ div-action, ... ],
                    text*: "string"
                  },
                  ...
                ],
                payload: "object",
                referer: "string",
                scope_id: "string",
                target: "string",
                typed: div-action-typed,
                url: "string"
              },
              ...
            ]
          },
          is_enabled: "bool_int",
          log_id*: "string",
          log_limit: "int",
          payload: "object",
          referer: "string",
          scope_id: "string",
          typed: div-action-typed,
          url: "string",
          visibility_duration: "int",
          visibility_percentage: "int"
        },
        ...
      ],
      width: div-size
    }
    
    Предыдущая
    Следующая