div-custom

Кастомный элемент. Делегируется хост-приложению для создания нативных элементов в зависимости от платформы.

Параметры

Параметры	Описание
`custom_type`	string Обязательный параметр. Подтип элемента для хост-приложения.
`type`	string Обязательный параметр. Значение всегда должно равняться `custom`.
`accessibility`	object Настройки доступности. Значение имеет тип `div-accessibility`. Доступные платформы: Android, iOS, веб.
`alignment_horizontal`	string Горизонтальное выравнивание элемента внутри родительского. Возможные значения: `left`, `center`, `right`, `start`, `end`.
`alignment_vertical`	string Вертикальное выравнивание элемента внутри родительского. Возможные значения: `top`, `center`, `bottom`, `baseline`.
`alpha`	number Устанавливает прозрачность всего элемента: `0` — полностью прозрачный, `1` — непрозрачный. Ограничение для значения `x`: `x >= 0.0 && x <= 1.0`. Значение по умолчанию: `1.0`.
`animators`	array Объявление аниматоров, с помощью которых можно изменять значение переменных во времени. Доступные платформы: Android, iOS. Список возможных значений: div-color-animator div-number-animator
`background`	array Фон элемента. Может содержать несколько слоев. Список возможных значений: div-linear-gradient div-radial-gradient div-image-background div-solid-background div-nine-patch-background
`border`	object Рамка элемента. Значение имеет тип `div-border`.
`column_span`	int Объединяет ячейки в столбце элемента grid. Ограничение для значения `x`: `x >= 0`. Доступные платформы: Android, iOS, веб.
`custom_props`	object Данные элемента для хост-приложения.
`disappear_actions`	array Действия при исчезновении элемента с экрана. Доступные платформы: Android, iOS, веб.
`extensions`	array Расширения для дополнительной обработки элемента. Список расширений см. в разделе Кастомизация. Доступные платформы: Android, iOS, веб.
`focus`	object Параметры при фокусировке на элементе или потере фокуса. Значение имеет тип `div-focus`.
`functions`	array Пользовательские функции. Доступные платформы: iOS.
`height`	object Высота элемента. Для Android: если в этом или в дочернем элементе есть текст, укажите высоту в `sp`, чтобы элемент масштабировался вместе с текстом. Подробнее о единицах измерения размера в разделе Верстка внутри карточки. Значение имеет тип `div-size`. Значение по умолчанию: `{"type": "wrap_content"}`. Список возможных значений: div-fixed-size div-match-parent-size div-wrap-content-size
`id`	string Идентификатор элемента. На iOS используется в качестве `accessibilityIdentifier`.
`items`	array Вложенные элементы. Список возможных значений: 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, веб.
`margins`	object Внешние отступы от рамки элемента. Значение имеет тип `div-edge-insets`.
`paddings`	object Внутренние отступы от рамки элемента. Значение имеет тип `div-edge-insets`.
`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`.
`visibility_action`	object Трекинг видимости одного элемента. Не используется, если задан параметр `visibility_actions`. Значение имеет тип `div-visibility-action`. Доступные платформы: Android, iOS, веб.
`visibility_actions`	array Действия при появлении элемента на экране. Доступные платформы: Android, iOS, веб.
`width`	object Ширина элемента. Значение имеет тип `div-size`. Значение по умолчанию: `{"type": "match_parent"}`. Список возможных значений: div-fixed-size div-match-parent-size div-wrap-content-size

JSON

{
  type*: "custom",
  accessibility: {
    description: "string",
    hint: "string",
    mode: "string",
    mute_after_action: "bool_int",
    state_description: "string",
    type: "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_span: "int",
  custom_props: "object",
  custom_type*: "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"
    },
    ...
  ],
  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,
  id: "string",
  items: [ div, ... ],
  layout_provider: {
    height_variable_name: "string",
    width_variable_name: "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"
  },
  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
}

div-custom

Параметры

Была ли статья полезна?