div-indicator

Progress indicator for pager.

Parameters

Parameters Description
type

string

Required parameter.

The value must always be indicator.
accessibility

object

Accessibility settings.

The value has the type div-accessibility.
active_item_color

string

Parameter is deprecated.

Active indicator color.

Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

Default value: #ffdc60.
active_item_size

number

Parameter is deprecated.

A size multiplier for an active indicator.

Restriction for the value x: x > 0.

Default value: 1.3.
active_shape

object

Active indicator shape.

The value has the type div-rounded-rectangle-shape.
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.
animation

string

Animation of switching between indicators.

Possible values: scale, worm, slider.

Default value: scale.

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

    string

    Parameter is deprecated.

    Indicator color.

    Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

    Default value: #33919cb5.
    inactive_minimum_shape

    object

    Inactive indicator shape, minimum size. Used when all the indicators don't fit on the screen.

    The value has the type div-rounded-rectangle-shape.

    Available platforms: Android, iOS.
    inactive_shape

    object

    Indicator shape.

    The value has the type div-rounded-rectangle-shape.
    items_placement

    object

    Indicator items placement mode:

  • Default: Indicators' width is fixed and defined by the shape parameters.
  • Stretch: Indicators are expanded to fill the entire width.

    • The value has the type div-indicator-item-placement.

    List of possible values:

  • div-default-indicator-item-placement
  • div-stretch-indicator-item-placement

    		•
    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.
    minimum_item_size

    number

    Parameter is deprecated.

    A size multiplier for a minimal indicator. It is used when the required number of indicators don't fit on the screen.

    Restriction for the value x: x > 0.

    Default value: 0.5.

    Available platforms: Android, iOS.
    paddings

    object

    Internal margins from the element stroke.

    The value has the type div-edge-insets.
    pager_id

    string

    ID of the pager that is a data source for an indicator.
    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.
    selected_actions

    array

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

    object

    Parameter is deprecated.

    Indicator shape.

    The value has the type div-shape.

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

    List of possible values:

  • div-rounded-rectangle-shape
  • div-circle-shape

    		•
    space_between_centers

    object

    Parameter is deprecated.

    Spacing between indicator centers.

    The value has the type div-fixed-size.

    Default value: {"type": "fixed","value":15}.
    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*: "indicator",
  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"
  },
  active_item_color: "string",
  active_item_size: "number",
  active_shape: {
    type*: "rounded_rectangle",
    background_color: "string",
    corner_radius: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    item_height: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    item_width: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    stroke: {
      color*: "string",
      style: div-stroke-style,
      unit: "string",
      width: "number"
    }
  },
  alignment_horizontal: "string",
  alignment_vertical: "string",
  alpha: "number",
  animation: "string",
  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",
  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",
  inactive_item_color: "string",
  inactive_minimum_shape: {
    type*: "rounded_rectangle",
    background_color: "string",
    corner_radius: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    item_height: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    item_width: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    stroke: {
      color*: "string",
      style: div-stroke-style,
      unit: "string",
      width: "number"
    }
  },
  inactive_shape: {
    type*: "rounded_rectangle",
    background_color: "string",
    corner_radius: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    item_height: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    item_width: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    stroke: {
      color*: "string",
      style: div-stroke-style,
      unit: "string",
      width: "number"
    }
  },
  items_placement: div-indicator-item-placement,
  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"
  },
  minimum_item_size: "number",
  paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  pager_id: "string",
  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",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  shape: div-shape,
  space_between_centers: {
    type*: "fixed",
    unit: "string",
    value*: "int"
  },
  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
}
    Previous
    div-image
    Next
    div-input