div-pager

Pager. It contains a horizontal set of cards that can be scrolled page by page. It shows the main page and the beginning of the next one.

Parameters

Parameters	Description
`layout_mode`	object Required parameter. Type of calculation of the main page width: `fixed` — from the fixed width of the next page `neighbour_page_width`; `percentage` — from the percentage value `page_width`. The value has the type `div-pager-layout-mode`. Available platforms: Android, iOS, web. List of possible values: div-page-size div-neighbour-page-size div-page-content-size
`type`	string Required parameter. The value must always be `pager`.
`accessibility`	object Accessibility settings. The value has the type `div-accessibility`. Available platforms: Android, iOS, web.
`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`.
`animators`	array Declaration of animators that change variable values over time. Available platforms: Android, iOS, web. List of possible values: div-color-animator div-number-animator
`background`	array Element background. It can contain multiple layers. List of possible values: div-linear-gradient div-radial-gradient div-image-background div-solid-background div-nine-patch-background
`border`	object Element stroke. The value has the type `div-border`.
`column_span`	int Merges cells in a column of the grid element. Restriction for the value `x`: `x >= 0`. Available platforms: Android, iOS, web.
`cross_axis_alignment`	string Aligning elements in the direction perpendicular to the scroll direction. In horizontal pager: `start` — alignment to the top of the card; `center` — to the center; `end` — to the bottom. In vertical pager: `start` — alignment to the left of the card; `center` — to the center; `end` — to the right. Possible values: `start`, `center`, `end`. Default value: `start`. Available platforms: Android, iOS, web.
`default_item`	int Ordinal number of the pager element that will be opened by default. Restriction for the value `x`: `x >= 0`. Default value: `0`.
`disappear_actions`	array Actions when an element disappears from the screen. Available platforms: Android, iOS, web.
`extensions`	array Extensions for additional processing of an element. The list of extensions is given in DivExtension. Available platforms: Android, iOS, web.
`focus`	object Parameters when focusing on an element or losing focus. The value has the type `div-focus`.
`functions`	array User functions. Available platforms: Android, iOS, web.
`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"}`. List of possible values: div-fixed-size div-match-parent-size div-wrap-content-size
`id`	string Element ID. It must be unique within the root element. It is used as `accessibilityIdentifier` on iOS.
`infinite_scroll`	bool_int Enables infinite scrolling of cards. Scrolling is looped: after the last card is displayed, it starts over again. Default value: `false`. Available platforms: Android, iOS, web.
`item_builder`	object Sets collection elements dynamically using `data` and `prototypes`. The value has the type `div-collection-item-builder`. Available platforms: Android, iOS, web.
`item_spacing`	object Spacing between elements. The value has the type `div-fixed-size`. Default value: `{"type": "fixed","value":0}`. Available platforms: Android, iOS, web.
`items`	array Pager elements. Page-by-page transition options can be implemented using: `div-action://set_current_item?id=&item=` — set the current page with an ordinal number `item` inside an element, with the specified `id`; `div-action://set_next_item?id=[&overflow={clamp\|ring}]` — go to the next page inside an element, with the specified `id`; `div-action://set_previous_item?id=[&overflow={clamp\|ring}]` — go to the previous page 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`. List of possible values: 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 Provides data on the actual size of the element. The size is calculated without taking into account the margins of the element itself. The value has the type `div-layout-provider`. Available platforms: Android, iOS, web.
`margins`	object External margins from the element stroke. The value has the type `div-edge-insets`.
`orientation`	string Pager orientation. Possible values: `horizontal`, `vertical`. Default value: `horizontal`.
`paddings`	object Internal margins from the element stroke. The value has the type `div-edge-insets`.
`page_transformation`	object Page transformation during pager scrolling. The value has the type `div-page-transformation`. Available platforms: Android, iOS. List of possible values: div-page-transformation-slide div-page-transformation-overlap
`restrict_parent_scroll`	bool_int If the parameter is enabled, the pager won't transmit the scroll gesture to the parent element. Default value: `false`. Available platforms: Android, web.
`reuse_id`	string ID for the div object structure. Used to optimize block reuse. See block reuse. Available platforms: Android, iOS.
`row_span`	int Merges cells in a string of the grid element. Restriction for the value `x`: `x >= 0`. Available platforms: Android, iOS, web.
`scroll_axis_alignment`	string Alignment of pager pages along the scroll direction. In horizontal pager: `start` — alignment to the left of the card; `center` — to the center; `end` — to the right. In vertical pager: `start` — alignment to the top of the card; `center` — to the center; `end` — to the bottom. . For edge alignment, the margin from the edge of the parent equals the value of the corresponding padding. Possible values: `start`, `center`, `end`. Default value: `center`. Available platforms: Android, iOS, web.
`selected_actions`	array List of actions to be executed when selecting an element in pager. Available platforms: Android, iOS, web.
`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. Available platforms: Android, iOS, web.
`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`. Available platforms: Android, iOS, web.
`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`. Available platforms: Android, iOS, web. List of possible values: div-change-set-transition div-change-bounds-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`. Available platforms: Android, iOS, web. List of possible values: div-appearance-set-transition div-fade-transition div-scale-transition div-slide-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`. Available platforms: Android, iOS, web. List of possible values: div-appearance-set-transition div-fade-transition div-scale-transition div-slide-transition
`transition_triggers`	array Animation starting triggers. Default value: `[state_change, visibility_change]`. An array must not be empty. Available platforms: Android, iOS, web.
`variable_triggers`	array Triggers for changing variables within an element. Available platforms: Android, iOS, web.
`variables`	array Declaration of variables that can be used within an element. Variables declared in this array can only be used within the element and its child elements. Available platforms: iOS, web, Android. List of possible values: string_variable number_variable integer_variable boolean_variable color_variable url_variable dict_variable array_variable
`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.
`width`	object Element width. The value has the type `div-size`. Default value: `{"type": "match_parent"}`. List of possible values: div-fixed-size div-match-parent-size div-wrap-content-size

JSON

{
  type*: "pager",
  accessibility: {
    description: "string",
    hint: "string",
    is_checked: "bool_int",
    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",
      style: div-stroke-style,
      unit: "string",
      width: "number"
    }
  },
  column_span: "int",
  cross_axis_alignment: "string",
  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",
            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",
        style: div-stroke-style,
        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",
  infinite_scroll: "bool_int",
  item_builder: {
    data*: "raw_array",
    data_element_name: "string",
    prototypes*: [
      {
        div*: div,
        id: "string",
        selector: "bool_int"
      },
      ...
    ]
  },
  item_spacing: {
    type*: "fixed",
    unit: "string",
    value*: "int"
  },
  items: [ div, ... ],
  layout_mode*: div-pager-layout-mode,
  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"
  },
  orientation: "string",
  paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  page_transformation: div-page-transformation,
  restrict_parent_scroll: "bool_int",
  reuse_id: "string",
  row_span: "int",
  scroll_axis_alignment: "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",
      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"
      },
      background_accessibility_description: "string",
      close_by_tap_outside: "bool",
      div*: div,
      duration: "int",
      id*: "string",
      mode: div-tooltip-mode,
      offset: {
        x*: {
          unit: "string",
          value*: "number"
        },
        y*: {
          unit: "string",
          value*: "number"
        }
      },
      position*: "string",
      tap_outside_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"
        },
        ...
      ]
    },
    ...
  ],
  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
}

Was the article helpful?

input

select