div-tabs

Tabs. Height of the first tab is determined by its contents, and height of the remaining depends on the platform.

Parameters

Parameters Description
items

array

Required parameter.

Tabs. Transition between tabs can be implemented using:

  • div-action://set_current_item?id=&item= — set the current tab 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 tab inside an element, with the specified id;
  • div-action://set_previous_item?id=[&overflow={clamp|ring}] — go to the previous tab 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.

    An array must not be empty.
    type

    string

    Required parameter.

    The value must always be tabs.
    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.
    disappear_actions

    array

    Actions when an element disappears from the screen.
    dynamic_height

    bool_int

    Updating height when changing the active element. In the browser, the value is always true.

    Default value: false.

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

    bool_int

    A separating line between tabs and contents.

    Default value: false.
    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.
    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.
    paddings

    object

    Internal margins from the element stroke.

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

    bool_int

    If the parameter is enabled, tabs 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.
    selected_actions

    array

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

    int

    Ordinal number of the tab that will be opened by default.

    Restriction for the value x: x >= 0.

    Default value: 0.
    separator_color

    string

    Separator color.

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

    Default value: #14000000.
    separator_paddings

    object

    Indents from the separating line. Not used if has_separator = false.

    The value has the type div-edge-insets.

    Default value: {"left": 12,"right": 12,"top": 0,"bottom": 0}.
    switch_tabs_by_content_swipe_enabled

    bool_int

    Switching tabs by scrolling through the contents.

    Default value: true.
    tab_title_delimiter

    object

    Design style of separators between tab titles.

    The value has the type tab_title_delimiter.
    tab_title_style

    object

    Design style of tab titles.

    The value has the type tab_title_style.
    title_paddings

    object

    Indents in the tab name.

    The value has the type div-edge-insets.

    Default value: {"left": 12,"right": 12,"top": 0,"bottom": 8}.
    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

    		•

    tab_title_style

    Parameters Description
    active_background_color

    string

    Background color of the active tab title.

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

    Default value: #FFFFDC60.
    active_font_variation_settings

    dictionary

    List of TrueType/OpenType font features of the active tab title.

    Available platforms: web.
    active_font_weight

    string

    Active tab title style.

    Possible values: light, medium, regular, bold.
    active_font_weight_value

    int

    Numeric value for font weight of the active tab title.

    Restriction for the value x: x > 0.
    active_text_color

    string

    Color of the active tab title text.

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

    Default value: #CC000000.
    animation_duration

    int

    Duration of active title change animation.

    Restriction for the value x: x >= 0.

    Default value: 300.
    animation_type

    string

    Active title change animation.

    Possible values: slide, fade, none.

    Default value: slide.
    corner_radius

    int

    Title corner rounding radius. If the parameter isn't specified, the rounding is maximum (half of the smallest size). Not used if the corners_radius parameter is set.

    Restriction for the value x: x >= 0.
    corners_radius

    object

    Rounding radii of corners of multiple titles. Empty values are replaced by corner_radius.

    The value has the type div-corners-radius.
    font_family

    string

    Font family:

  • text — a standard text font;
  • display — a family of fonts with a large font size.

    		•
    font_size

    int

    Title font size.

    Restriction for the value x: x >= 0.

    Default value: 12.
    font_size_unit

    string

    Units of title font size measurement.

    Possible values: dp, sp, px.

    Default value: sp.
    font_weight

    string

    Parameter is deprecated.

    Style. Use active_font_weight and inactive_font_weight instead.

    Possible values: light, medium, regular, bold.

    Default value: regular.
    inactive_background_color

    string

    Background color of the inactive tab title.

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

    dictionary

    List of TrueType/OpenType font features of the inactive tab title.

    Available platforms: web.
    inactive_font_weight

    string

    Inactive tab title style.

    Possible values: light, medium, regular, bold.
    inactive_font_weight_value

    int

    Numeric value for font weight of the inactive tab title.

    Restriction for the value x: x > 0.
    inactive_text_color

    string

    Color of the inactive tab title text.

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

    Default value: #80000000.
    item_spacing

    int

    Spacing between neighbouring tab titles.

    Restriction for the value x: x >= 0.

    Default value: 0.
    letter_spacing

    number

    Spacing between title characters.

    Default value: 0.
    line_height

    int

    Line spacing of the text.

    Restriction for the value x: x >= 0.
    paddings

    object

    Indents around the tab title.

    The value has the type div-edge-insets.

    Default value: {"left": 8,"right": 8,"top": 6,"bottom": 6}.

    tab_title_delimiter

    Parameters Description
    image_url

    string

    Required parameter.

    Direct URL to an image.

    The value must be a valid URL.
    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-fixed-size.

    Default value: {"type": "fixed", "value": 12}.
    width

    object

    Element width.

    The value has the type div-fixed-size.

    Default value: {"type": "fixed", "value": 12}.

    item

    Parameters Description
    div

    object

    Required parameter.

    Tab contents.

    The value has the type div.

    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

    		•
    title

    string

    Required parameter.

    Tab title.
    title_click_action

    object

    Action when clicking on the active tab title.

    The value has the type div-action.
    JSON 
    {
  type*: "tabs",
  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",
  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"
    },
    ...
  ],
  dynamic_height: "bool_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"
    },
    ...
  ],
  has_separator: "bool_int",
  height: div-size,
  id: "string",
  items*: [
    {
      div*: div,
      title*: "string",
      title_click_action: {
        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"
      }
    },
    ...
  ],
  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"
  },
  paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  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",
      scope_id: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  selected_tab: "int",
  separator_color: "string",
  separator_paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  switch_tabs_by_content_swipe_enabled: "bool_int",
  tab_title_delimiter: {
    height: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    },
    image_url*: "string",
    width: {
      type*: "fixed",
      unit: "string",
      value*: "int"
    }
  },
  tab_title_style: {
    active_background_color: "string",
    active_font_variation_settings: "dictionary",
    active_font_weight: "string",
    active_font_weight_value: "int",
    active_text_color: "string",
    animation_duration: "int",
    animation_type: "string",
    corner_radius: "int",
    corners_radius: {
      bottom-left: "int",
      bottom-right: "int",
      top-left: "int",
      top-right: "int"
    },
    font_family: "string",
    font_size: "int",
    font_size_unit: "string",
    font_weight: "string",
    inactive_background_color: "string",
    inactive_font_variation_settings: "dictionary",
    inactive_font_weight: "string",
    inactive_font_weight_value: "int",
    inactive_text_color: "string",
    item_spacing: "int",
    letter_spacing: "number",
    line_height: "int",
    paddings: {
      bottom: "int",
      end: "int",
      left: "int",
      right: "int",
      start: "int",
      top: "int",
      unit: "string"
    }
  },
  title_paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "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-switch
    Next
    div-text