div-gallery

Gallery. It contains a horizontal or vertical set of cards that can be scrolled.

JSON

{
  type*: "gallery",
  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",
  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: "int"
    }
  },
  column_count: "int",
  column_span: "int",
  cross_content_alignment: "string",
  cross_spacing: "int",
  default_item: "int",
  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",
            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",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "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: "int"
      }
    },
    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",
        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",
        target: "string",
        typed: div-action-typed,
        url: "string"
      },
      ...
    ]
  },
  height: div-size,
  id: "string",
  item_spacing: "int",
  items: [ div, ... ],
  margins: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  orientation: "string",
  paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  restrict_parent_scroll: "bool_int",
  row_span: "int",
  scroll_mode: "string",
  scrollbar: "string",
  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",
      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", ... ],
  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",
          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",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ]
    },
    is_enabled: "bool_int",
    log_id*: "string",
    log_limit: "int",
    payload: "object",
    referer: "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",
            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",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "string",
      typed: div-action-typed,
      url: "string",
      visibility_duration: "int",
      visibility_percentage: "int"
    },
    ...
  ],
  width: div-size
}

Parameters

ParametersDescription
accessibility

object

Accessibility settings.

The value has the type div-accessibility.

alignment_horizontal

string

Horizontal alignment of an element inside the parent element.

Possible values: left, center, right, start, end.

alignment_vertical

string

Vertical alignment of an element inside the parent element.

Possible values: top, center, bottom, baseline.

alpha

number

Sets transparency of the entire element: 0 — completely transparent, 1 — opaque.

Restriction for the value x: x >= 0.0 && x <= 1.0.

Default value: 1.0.

background

array

Element background. It can contain multiple layers.

An array must not be empty.

border

object

Element stroke.

The value has the type div-border.

column_count

int

Number of columns for block layout.

Restriction for the value x: x > 0.

column_span

int

Merges cells in a column of the grid element.

Restriction for the value x: x >= 0.

cross_content_alignment

string

Aligning elements in the direction perpendicular to the scroll direction. In horizontal galleries:
  • start — alignment to the top of the card;
  • center — to the center;
  • end — to the bottom.
  • In vertical galleries:
  • start — alignment to the left of the card;
  • center — to the center;
  • end — to the right.
  • Possible values: start, center, end.

    Default value: start.

    cross_spacing

    int

    Spacing between elements across the scroll axis. By default, the value set to item_spacing.

    Restriction for the value x: x >= 0.

    default_item

    int

    Ordinal number of the gallery element to be scrolled to by default. For scroll_mode:
  • default — the scroll position is set to the beginning of the element, without taking into account item_spacing;
  • paging — the scroll position is set to the center of the element.
  • Restriction for the value x: x >= 0.

    Default value: 0.

    disappear_actions

    array

    Actions when an element disappears from the screen.

    An array must not be empty.

    extensions

    array

    Extensions for additional processing of an element. The list of extensions is given in DivExtension.

    An array must not be empty.

    focus

    object

    Parameters when focusing on an element or losing focus.

    The value has the type div-focus.

    height

    object

    Element height. For Android: if there is text in this or in a child element, specify height in sp to scale the element together with the text. To learn more about units of size measurement, see Layout inside the card.

    The value has the type div-size.

    Default value: {"type": "wrap_content"}.

    id

    string

    Element ID. It must be unique within the root element. It is used as accessibilityIdentifier on iOS.

    item_spacing

    int

    Spacing between elements.

    Restriction for the value x: x >= 0.

    Default value: 8.

    items

    array

    Gallery elements. Scrolling to elements can be implemented using:
  • div-action://set_current_item?id=&item= — scrolling to the element with an ordinal number item inside an element, with the specified id;
  • div-action://set_next_item?id=[&overflow={clamp|ring}] — scrolling to the next element inside an element, with the specified id;
  • div-action://set_previous_item?id=[&overflow={clamp|ring}] — scrolling to the previous element inside an element, with the specified id.
  • The optional overflow parameter is used to set navigation when the first or last element is reached:
  • clamp — transition will stop at the border element;
  • ring — go to the beginning or end, depending on the current element.
  • By default, clamp.

    An array must not be empty.

    margins

    object

    External margins from the element stroke.

    The value has the type div-edge-insets.

    orientation

    string

    Gallery orientation.

    Possible values: horizontal, vertical.

    Default value: horizontal.

    paddings

    object

    Internal margins from the element stroke.

    The value has the type div-edge-insets.

    restrict_parent_scroll

    bool_int

    If the parameter is enabled, the gallery won't transmit the scroll gesture to the parent element.

    Default value: false.

    Available platforms: Android, web.

    row_span

    int

    Merges cells in a string of the grid element.

    Restriction for the value x: x >= 0.

    scroll_mode

    string

    Scroll type: default — continuous, paging — page-by-page.

    Possible values: paging, default.

    Default value: default.

    scrollbar

    string

    Scrollbar behavior. Hidden by default. When choosing a gallery size, keep in mind that the scrollbar may have a different height and width depending on the platform and user settings.
  • none — the scrollbar is hidden.
  • auto — the scrollbar is shown if there isn't enough space and it needs to be displayed on the current platform.
  • Possible values: none, auto.

    Default value: none.

    Available platforms: web, Android.

    selected_actions

    array

    List of actions to be executed when selecting an element in pager.

    An array must not be empty.

    tooltips

    array

    Tooltips linked to an element. A tooltip can be shown by div-action://show_tooltip?id=, hidden by div-action://hide_tooltip?id= where id — tooltip id.

    An array must not be empty.

    transform

    object

    Applies the passed transformation to the element. Content that doesn't fit into the original view area is cut off.

    The value has the type div-transform.

    transition_change

    object

    Change animation. It is played when the position or size of an element changes in the new layout.

    The value has the type div-change-transition.

    transition_in

    object

    Appearance animation. It is played when an element with a new ID appears. To learn more about the concept of transitions, see Animated transitions.

    The value has the type div-appearance-transition.

    transition_out

    object

    Disappearance animation. It is played when an element disappears in the new layout.

    The value has the type div-appearance-transition.

    transition_triggers

    array

    Animation starting triggers. Default value: [state_change, visibility_change].

    An array must not be empty.

    type

    string

    Required parameter.

    The value must always be gallery.

    visibility

    string

    Element visibility.

    Possible values: visible, invisible, gone.

    Default value: visible.

    visibility_action

    object

    Tracking visibility of a single element. Not used if the visibility_actions parameter is set.

    The value has the type div-visibility-action.

    visibility_actions

    array

    Actions when an element appears on the screen.

    An array must not be empty.

    width

    object

    Element width.

    The value has the type div-size.

    Default value: {"type": "match_parent"}.

    ParametersDescription
    accessibility

    object

    Accessibility settings.

    The value has the type div-accessibility.

    alignment_horizontal

    string

    Horizontal alignment of an element inside the parent element.

    Possible values: left, center, right, start, end.

    alignment_vertical

    string

    Vertical alignment of an element inside the parent element.

    Possible values: top, center, bottom, baseline.

    alpha

    number

    Sets transparency of the entire element: 0 — completely transparent, 1 — opaque.

    Restriction for the value x: x >= 0.0 && x <= 1.0.

    Default value: 1.0.

    background

    array

    Element background. It can contain multiple layers.

    An array must not be empty.

    border

    object

    Element stroke.

    The value has the type div-border.

    column_count

    int

    Number of columns for block layout.

    Restriction for the value x: x > 0.

    column_span

    int

    Merges cells in a column of the grid element.

    Restriction for the value x: x >= 0.

    cross_content_alignment

    string

    Aligning elements in the direction perpendicular to the scroll direction. In horizontal galleries:
  • start — alignment to the top of the card;
  • center — to the center;
  • end — to the bottom.
  • In vertical galleries:
  • start — alignment to the left of the card;
  • center — to the center;
  • end — to the right.
  • Possible values: start, center, end.

    Default value: start.

    cross_spacing

    int

    Spacing between elements across the scroll axis. By default, the value set to item_spacing.

    Restriction for the value x: x >= 0.

    default_item

    int

    Ordinal number of the gallery element to be scrolled to by default. For scroll_mode:
  • default — the scroll position is set to the beginning of the element, without taking into account item_spacing;
  • paging — the scroll position is set to the center of the element.
  • Restriction for the value x: x >= 0.

    Default value: 0.

    disappear_actions

    array

    Actions when an element disappears from the screen.

    An array must not be empty.

    extensions

    array

    Extensions for additional processing of an element. The list of extensions is given in DivExtension.

    An array must not be empty.

    focus

    object

    Parameters when focusing on an element or losing focus.

    The value has the type div-focus.

    height

    object

    Element height. For Android: if there is text in this or in a child element, specify height in sp to scale the element together with the text. To learn more about units of size measurement, see Layout inside the card.

    The value has the type div-size.

    Default value: {"type": "wrap_content"}.

    id

    string

    Element ID. It must be unique within the root element. It is used as accessibilityIdentifier on iOS.

    item_spacing

    int

    Spacing between elements.

    Restriction for the value x: x >= 0.

    Default value: 8.

    items

    array

    Gallery elements. Scrolling to elements can be implemented using:
  • div-action://set_current_item?id=&item= — scrolling to the element with an ordinal number item inside an element, with the specified id;
  • div-action://set_next_item?id=[&overflow={clamp|ring}] — scrolling to the next element inside an element, with the specified id;
  • div-action://set_previous_item?id=[&overflow={clamp|ring}] — scrolling to the previous element inside an element, with the specified id.
  • The optional overflow parameter is used to set navigation when the first or last element is reached:
  • clamp — transition will stop at the border element;
  • ring — go to the beginning or end, depending on the current element.
  • By default, clamp.

    An array must not be empty.

    margins

    object

    External margins from the element stroke.

    The value has the type div-edge-insets.

    orientation

    string

    Gallery orientation.

    Possible values: horizontal, vertical.

    Default value: horizontal.

    paddings

    object

    Internal margins from the element stroke.

    The value has the type div-edge-insets.

    restrict_parent_scroll

    bool_int

    If the parameter is enabled, the gallery won't transmit the scroll gesture to the parent element.

    Default value: false.

    Available platforms: Android, web.

    row_span

    int

    Merges cells in a string of the grid element.

    Restriction for the value x: x >= 0.

    scroll_mode

    string

    Scroll type: default — continuous, paging — page-by-page.

    Possible values: paging, default.

    Default value: default.

    scrollbar

    string

    Scrollbar behavior. Hidden by default. When choosing a gallery size, keep in mind that the scrollbar may have a different height and width depending on the platform and user settings.
  • none — the scrollbar is hidden.
  • auto — the scrollbar is shown if there isn't enough space and it needs to be displayed on the current platform.
  • Possible values: none, auto.

    Default value: none.

    Available platforms: web, Android.

    selected_actions

    array

    List of actions to be executed when selecting an element in pager.

    An array must not be empty.

    tooltips

    array

    Tooltips linked to an element. A tooltip can be shown by div-action://show_tooltip?id=, hidden by div-action://hide_tooltip?id= where id — tooltip id.

    An array must not be empty.

    transform

    object

    Applies the passed transformation to the element. Content that doesn't fit into the original view area is cut off.

    The value has the type div-transform.

    transition_change

    object

    Change animation. It is played when the position or size of an element changes in the new layout.

    The value has the type div-change-transition.

    transition_in

    object

    Appearance animation. It is played when an element with a new ID appears. To learn more about the concept of transitions, see Animated transitions.

    The value has the type div-appearance-transition.

    transition_out

    object

    Disappearance animation. It is played when an element disappears in the new layout.

    The value has the type div-appearance-transition.

    transition_triggers

    array

    Animation starting triggers. Default value: [state_change, visibility_change].

    An array must not be empty.

    type

    string

    Required parameter.

    The value must always be gallery.

    visibility

    string

    Element visibility.

    Possible values: visible, invisible, gone.

    Default value: visible.

    visibility_action

    object

    Tracking visibility of a single element. Not used if the visibility_actions parameter is set.

    The value has the type div-visibility-action.

    visibility_actions

    array

    Actions when an element appears on the screen.

    An array must not be empty.

    width

    object

    Element width.

    The value has the type div-size.

    Default value: {"type": "match_parent"}.