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

    		•
    type

    string

    Required parameter.

    The value must always be pager.

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.
    alignment_vertical

    string

    Vertical alignment of an element inside the parent element.

    Possible values: top, center, bottom, baseline.

    Available platforms: Android, iOS, web.
    alpha

    number

    Transparency of whole element: 0 — completely transparent, 1 — opaque.

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

    Default value: 1.0.

    Available platforms: Android, iOS, web.
    animators

    array

    Declaration of animators that can be used to change the value of variables over time.

    Functionality is under development.

    List of possible values:

  • div-color-animator
  • div-number-animator

    		•
    background

    array

    Element background. It can contain multiple layers.

    Available platforms: Android, iOS, web.

    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.

    Available platforms: Android, iOS, web.
    column_span

    int

    Merges cells in a column of the grid element.

    Restriction for the value x: x >= 0.

    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.

    Available platforms: Android, iOS, web.
    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.

    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"}.

    Available platforms: Android, iOS, web.

    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.

    Available platforms: Android, iOS, web.
    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.
    item_builder

    object

    Sets collection elements dynamically using data and prototypes.

    The value has the type div-collection-item-builder.

    Available platforms: iOS.
    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.

    Available platforms: Android, iOS, web.

    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-input
  • div-select
  • div-video

    		•
    layout_provider

    object

    Provides element real size values after a layout cycle.

    The value has the type div-layout-provider.

    Available platforms: Android, iOS.
    margins

    object

    External margins from the element stroke.

    The value has the type div-edge-insets.

    Available platforms: Android, iOS, web.
    orientation

    string

    Pager orientation.

    Possible values: horizontal, vertical.

    Default value: horizontal.

    Available platforms: Android, iOS, web.
    paddings

    object

    Internal margins from the element stroke.

    The value has the type div-edge-insets.

    Available platforms: Android, iOS, web.
    page_transformation

    object

    Page transformation during movement.

    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 structure. Used for more optimal reuse of blocks. See reusing blocks

    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.
    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: iOS.
    variables

    array

    Definition of variables that can be used within this element. These variables, defined in the array, can only be used inside this element and its children.

    Available platforms: iOS.

    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.

    Available platforms: Android, iOS, web.
    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.

    Available platforms: Android, iOS, web.
    visibility_actions

    array

    Actions when an element appears on the screen.

    Available platforms: Android, iOS, web.
    width

    object

    Element width.

    The value has the type div-size.

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

    Available platforms: Android, iOS, web.

    List of possible values:

  • div-fixed-size
  • div-match-parent-size
  • div-wrap-content-size

    		•
    JSON 
    {
  type*: "pager",
  accessibility: {
    description: "string",
    hint: "string",
    mode: "string",
    mute_after_action: "bool_int",
    state_description: "string",
    type: "string"
  },
  alignment_horizontal: "string",
  alignment_vertical: "string",
  alpha: "number",
  animators: [ div-animator, ... ],
  background: [ div-background, ... ],
  border: {
    corner_radius: "int",
    corners_radius: {
      bottom-left: "int",
      bottom-right: "int",
      top-left: "int",
      top-right: "int"
    },
    has_shadow: "bool_int",
    shadow: {
      alpha: "number",
      blur: "int",
      color: "string",
      offset*: {
        x*: {
          unit: "string",
          value*: "number"
        },
        y*: {
          unit: "string",
          value*: "number"
        }
      }
    },
    stroke: {
      color*: "string",
      unit: "string",
      width: "number"
    }
  },
  column_span: "int",
  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: "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",
        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",
  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",
  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", ... ],
  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",
          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",
          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
}
    Previous
    input
    Next
    select