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`. 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`.
`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. 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`.
`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`.
`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.
`extensions`	array Extensions for additional processing of an element. The list of extensions is given in DivExtension.
`focus`	object Parameters when focusing on an element or losing focus. The value has the type `div-focus`.
`functions`	array User functions.
`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`.
`item_builder`	object Sets collection elements dynamically using `data` and `prototypes`. The value has the type `div-collection-item-builder`.
`item_count_variable`	string Name of the variable to store the number of pager elements available to the user.
`item_spacing`	object Spacing between elements. The value has the type `div-fixed-size`. Default value: `{"type": "fixed","value":0}`.
`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 value has the type `div-layout-provider`.
`margins`	object External margins from the element stroke. The value has the type `div-edge-insets`.
`multi_page_scroll`	bool_int Enables or disables the ability to scroll more than one pager page with a single swipe. Doesn't affect programmatic scrolling. Default value: `false`.
`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`.
`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`.
`selected_actions`	array List of actions to be executed when selecting an element in pager.
`timers`	array List of timers. Available platforms: 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.
`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`.
`transformations`	array Array of transformations to be applied to the element in sequence. Available platforms: web. List of possible values: div-rotation-transformation div-translation-transformation
`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`. 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`. 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`. 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.
`variable_triggers`	array Triggers for changing variables within an element.
`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. List of possible values: string_variable number_variable integer_variable boolean_variable color_variable url_variable dict_variable array_variable property_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",
    menu: [
      {
        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"
          },
          ...
        ],
        label*: "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",
      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",
      is_enabled: "bool_int",
      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_count_variable: "string",
  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"
  },
  multi_page_scroll: "bool_int",
  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"
    },
    ...
  ],
  timers: [
    {
      duration: "int",
      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"
        },
        ...
      ],
      id*: "string",
      tick_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"
        },
        ...
      ],
      tick_interval: "int",
      value_variable: "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",
      bring_to_top_id: "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",
      substrate_div: div,
      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"
  },
  transformations: [ div-transformation, ... ],
  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?

div-input

div-select