div-container
Container. It contains other elements and is responsible for their location. It is used to arrange elements vertically, horizontally, and with an overlay in a certain order, simulating the third dimension.
Parameters
| Parameters | Description |
|---|---|
type |
string Required parameter. The value must always be |
accessibility |
object Accessibility settings. The value has the type |
action |
object One action when clicking on an element. Not used if the The value has the type |
action_animation |
object Click animation. The web only supports the following values: The value has the type Default value: |
actions |
array Multiple actions when clicking on an element. |
alignment_horizontal |
string Horizontal alignment of an element inside the parent element. Possible values: |
alignment_vertical |
string Vertical alignment of an element inside the parent element. Possible values: |
alpha |
number Sets transparency of the entire element: Restriction for the value Default value: |
animators |
array Declaration of animators that change variable values over time. List of possible values: |
aspect |
object Fixed aspect ratio of the container. The element's height is calculated based on the width, ignoring the On the web, support for the The value has the type |
background |
array Element background. It can contain multiple layers. List of possible values: |
border |
object Element stroke. The value has the type |
capture_focus_on_action |
bool If the value is: true - when the element action is activated, the focus will be moved to that element. That means that the accessibility focus will be moved and the virtual keyboard will be hidden, unless the target element implies its presence (e.g. input).false - when you click on an element, the focus will remain on the currently focused element.Default value: |
clip_to_bounds |
bool_int Enables the bounding of child elements by the parent's borders. Default value: |
column_span |
int Merges cells in a column of the grid element. Restriction for the value |
content_alignment_horizontal |
string Horizontal element alignment. For child elements, it can be redefined using the Possible values: Default value: |
content_alignment_vertical |
string Vertical element alignment. The Possible values: Default value: |
disappear_actions |
array Actions when an element disappears from the screen. |
doubletap_actions |
array Action when double-clicking on an element. |
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 |
functions |
array User functions. |
height |
object Element height. For Android: if there is text in this or in a child element, specify height in The value has the type Default value: List of possible values: |
hover_end_actions |
array Actions performed after hovering over an element. Available on platforms that support pointing devices (such as a mouse or stylus). |
hover_start_actions |
array Actions performed when hovering over an element. Available on platforms that support pointing devices (such as a mouse or stylus). |
id |
string Element ID. It must be unique within the root element. It is used as |
item_builder |
object Sets collection elements dynamically using The value has the type |
item_spacing |
int Spacing between items along the main axis. Ignored if Restriction for the value Default value: |
items |
array Nested elements. List of possible values: |
layout_mode |
string Element placement method. The match_parent.match_parent are ignored.Possible values: Default value: |
layout_provider |
object Provides data on the actual size of the element. The value has the type |
line_separator |
object Separator between elements along the cross axis. Not used if the The value has the type |
line_spacing |
int Spacing between lines of items when Restriction for the value Default value: |
longtap_actions |
array Action when long-clicking an element. Doesn't work on devices that don't support touch gestures. |
margins |
object External margins from the element stroke. The value has the type |
orientation |
string Location of elements. Possible values: Default value: |
paddings |
object Internal margins from the element stroke. The value has the type |
press_end_actions |
array Actions performed after clicking/tapping an element. |
press_start_actions |
array Actions performed at the start of a click/tap on an element. |
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 |
selected_actions |
array List of actions to be executed when selecting an element in pager. |
separator |
object Separator between elements along the main axis. Not used if the The value has the type |
timers |
array List of timers. Available platforms: web. |
tooltips |
array Tooltips linked to an element. A tooltip can be shown by |
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 |
transformations |
array Array of transformations to be applied to the element in sequence. Available platforms: web. List of possible values: |
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 List of possible values: |
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 List of possible values: |
transition_out |
object Disappearance animation. It is played when an element disappears in the new layout. The value has the type List of possible values: |
transition_triggers |
array Animation starting triggers. Default value: 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: |
visibility |
string Element visibility. Possible values: Default value: |
visibility_action |
object Tracking visibility of a single element. Not used if the The value has the type |
visibility_actions |
array Actions when an element appears on the screen. |
width |
object Element width. The value has the type Default value: List of possible values: |
separator
| Parameters | Description |
|---|---|
style |
object Required parameter. Separator style. The value has the type List of possible values: |
margins |
object External margins from the element stroke. The value has the type |
show_at_end |
bool_int Enables displaying the separator after the last item. Default value: |
show_at_start |
bool_int Enables displaying the separator before the first item. Default value: |
show_between |
bool_int Enables displaying the separator between items. Default value: |
JSON
{
type*: "container",
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"
},
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"
},
action_animation: {
duration: "int",
end_value: "number",
interpolator: "string",
items: [ div-animation, ... ],
name*: "string",
repeat: div-count,
start_delay: "int",
start_value: "number"
},
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"
},
...
],
alignment_horizontal: "string",
alignment_vertical: "string",
alpha: "number",
animators: [ div-animator, ... ],
aspect: {
ratio*: "number"
},
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"
}
},
capture_focus_on_action: "bool",
clip_to_bounds: "bool_int",
column_span: "int",
content_alignment_horizontal: "string",
content_alignment_vertical: "string",
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"
},
...
],
doubletap_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"
},
...
],
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,
hover_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"
},
...
],
hover_start_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",
item_builder: {
data*: "raw_array",
data_element_name: "string",
prototypes*: [
{
div*: div,
id: "string",
selector: "bool_int"
},
...
]
},
item_spacing: "int",
items: [ div, ... ],
layout_mode: "string",
layout_provider: {
height_variable_name: "string",
width_variable_name: "string"
},
line_separator: {
margins: {
bottom: "int",
end: "int",
left: "int",
right: "int",
start: "int",
top: "int",
unit: "string"
},
show_at_end: "bool_int",
show_at_start: "bool_int",
show_between: "bool_int",
style*: div-drawable
},
line_spacing: "int",
longtap_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"
},
...
],
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"
},
press_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"
},
...
],
press_start_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"
},
...
],
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"
},
...
],
separator: {
margins: {
bottom: "int",
end: "int",
left: "int",
right: "int",
start: "int",
top: "int",
unit: "string"
},
show_at_end: "bool_int",
show_at_start: "bool_int",
show_between: "bool_int",
style*: div-drawable
},
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
}