--- metadata: - name: generator content: Diplodoc Platform v5.50.3 alternate: - https://divkit.tech/docs/en/concepts/divs/2/div-pager.md - https://divkit.tech/docs/ru/concepts/divs/2/div-pager.md --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt # 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-page-size.md#div-page-size)
  • [div-neighbour-page-size](div-neighbour-page-size.md#div-neighbour-page-size)
  • [div-page-content-size](div-page-content-size.md#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-color-animator.md#div-color-animator)
  • [div-number-animator](div-number-animator.md#div-number-animator)

    • | | `background` |

    **array**

    Element background. It can contain multiple layers.

    List of possible values:

  • [div-linear-gradient](div-linear-gradient.md#div-linear-gradient)
  • [div-radial-gradient](div-radial-gradient.md#div-radial-gradient)
  • [div-image-background](div-image-background.md#div-image-background)
  • [div-solid-background](div-solid-background.md#div-solid-background)
  • [div-nine-patch-background](div-nine-patch-background.md#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](div-grid.md) 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](../../extensions).

    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](../../layout).

    The value has the type `div-size`.

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

    List of possible values:

  • [div-fixed-size](div-fixed-size.md#div-fixed-size)
  • [div-match-parent-size](div-match-parent-size.md#div-match-parent-size)
  • [div-wrap-content-size](div-wrap-content-size.md#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_count_variable` |

    **string**

    Name of the variable to store the number of pager elements available to the user.

    Available platforms: 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-image.md#div-image)
  • [div-gif-image](div-gif-image.md#div-gif-image)
  • [div-text](div-text.md#div-text)
  • [div-separator](div-separator.md#div-separator)
  • [div-container](div-container.md#div-container)
  • [div-grid](div-grid.md#div-grid)
  • [div-gallery](div-gallery.md#div-gallery)
  • [div-pager](div-pager.md#div-pager)
  • [div-tabs](div-tabs.md#div-tabs)
  • [div-state](div-state.md#div-state)
  • [div-custom](div-custom.md#div-custom)
  • [div-indicator](div-indicator.md#div-indicator)
  • [div-slider](div-slider.md#div-slider)
  • [div-switch](div-switch.md#div-switch)
  • [div-input](div-input.md#div-input)
  • [div-select](div-select.md#div-select)
  • [div-video](div-video.md#div-video)

    • | | `layout_provider` |

    **object**

    Provides data on the actual size of the element.

    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-slide.md#div-page-transformation-slide)
  • [div-page-transformation-overlap](div-page-transformation-overlap.md#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](../../reuse/reuse.md).

    Available platforms: Android, iOS.

    | | `row_span` |

    **int**

    Merges cells in a string of the [grid](div-grid.md) 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](div-action.md) to be executed when selecting an element in [pager](div-pager.md).

    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.

    | | `transformations` |

    **array**

    Array of transformations to be applied to the element in sequence.

    Available platforms: web.

    List of possible values:

  • [div-rotation-transformation](div-rotation-transformation.md#div-rotation-transformation)
  • [div-translation-transformation](div-translation-transformation.md#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`.

    Available platforms: Android, iOS, web.

    List of possible values:

  • [div-change-set-transition](div-change-set-transition.md#div-change-set-transition)
  • [div-change-bounds-transition](div-change-bounds-transition.md#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](../../interaction#animation/transition-animation).

    The value has the type `div-appearance-transition`.

    Available platforms: Android, iOS, web.

    List of possible values:

  • [div-appearance-set-transition](div-appearance-set-transition.md#div-appearance-set-transition)
  • [div-fade-transition](div-fade-transition.md#div-fade-transition)
  • [div-scale-transition](div-scale-transition.md#div-scale-transition)
  • [div-slide-transition](div-slide-transition.md#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-appearance-set-transition.md#div-appearance-set-transition)
  • [div-fade-transition](div-fade-transition.md#div-fade-transition)
  • [div-scale-transition](div-scale-transition.md#div-scale-transition)
  • [div-slide-transition](div-slide-transition.md#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](string_variable.md#string_variable)
  • [number_variable](number_variable.md#number_variable)
  • [integer_variable](integer_variable.md#integer_variable)
  • [boolean_variable](boolean_variable.md#boolean_variable)
  • [color_variable](color_variable.md#color_variable)
  • [url_variable](url_variable.md#url_variable)
  • [dict_variable](dict_variable.md#dict_variable)
  • [array_variable](array_variable.md#array_variable)
  • [property_variable](property_variable.md#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-fixed-size.md#div-fixed-size)
  • [div-match-parent-size](div-match-parent-size.md#div-match-parent-size)
  • [div-wrap-content-size](div-wrap-content-size.md#div-wrap-content-size)

    • |
    JSON ```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", 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" }, 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", 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 } ```