div-state
It contains sets of states for visual elements and switches between them.
Parameters
Parameters | Description |
---|---|
states |
array Required parameter. States. Each element can have a few states with a different layout. Transition between states is performed using special scheme of the action element. An array must not be empty. |
type |
string Required parameter. The value must always be |
accessibility |
object Accessibility settings. The value has the type Available platforms: Android, iOS, web. |
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. Available platforms: Android, iOS. List of possible values: |
background |
array Element background. It can contain multiple layers. List of possible values: |
border |
object Element stroke. The value has the type |
column_span |
int Merges cells in a column of the grid element. Restriction for the value Available platforms: Android, iOS, web. |
default_state_id |
string ID of the status that will be set by default. If the parameter isnt set, the first state of the |
disappear_actions |
array Actions when an element disappears from the screen. Available platforms: Android, iOS, web. |
div_id |
string Parameter is deprecated. ID of an element to search in the hierarchy. The ID must be unique at one hierarchy level. |
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 |
functions |
array User functions. Available platforms: iOS. |
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: |
id |
string Element ID. It must be unique within the root element. It is used as |
layout_provider |
object Provides data on the actual size of the element. The value has the type Available platforms: Android, iOS, web. |
margins |
object External margins from the element stroke. The value has the type |
paddings |
object Internal margins from the element stroke. The value has the type |
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 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. |
state_id_variable |
string The name of the variable that stores the ID for the current state. If the variable changes, the active state will also change. The variable is prioritized over the default_state_id parameter. |
tooltips |
array Tooltips linked to an element. A tooltip can be shown by 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 Available platforms: Android, iOS, web. |
transition_animation_selector |
string Parameter is deprecated. It determines which events trigger transition animations. Possible values: Default value: |
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 Available platforms: Android, iOS, web. 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 Available platforms: Android, iOS, web. 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 Available platforms: Android, iOS, web. List of possible values: |
transition_triggers |
array Animation starting triggers. Default value: An array must not be empty. Available platforms: Android, iOS, web. |
variable_triggers |
array Triggers for changing variables within an element. Available platforms: Android, iOS, web. |
variables |
array Declaration of variables that can be used within an element. Variables declared in this array can only be used within the element and its child elements. Available platforms: iOS, web, Android. List of possible values: |
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 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 Default value: List of possible values: |
state
Parameters | Description |
---|---|
state_id |
string Required parameter. State ID. It must be unique at one hierarchy level. |
animation_in |
object Parameter is deprecated. State appearance animation. Use The value has the type Available platforms: Android, iOS. |
animation_out |
object Parameter is deprecated. State disappearance animation. Use The value has the type Available platforms: Android, iOS. |
div |
object Contents. If the parameter is missing, the state won't be displayed. The value has the type List of possible values: |
swipe_out_actions |
array Parameter is deprecated. Actions when swiping the state horizontally. Available platforms: Android. |
JSON
{
type*: "state",
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_state_id: "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"
},
...
],
div_id: "string",
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",
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",
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"
},
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"
},
...
],
state_id_variable: "string",
states*: [
{
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,
state_id*: "string",
swipe_out_actions: [
{
download_callbacks: {
on_fail_actions: [ div-action, ... ],
on_success_actions: [ div-action, ... ]
},
is_enabled: "bool_int",
log_id*: "string",
log_url: "string",
menu_items: [
{
action: div-action,
actions: [ div-action, ... ],
text*: "string"
},
...
],
payload: "object",
referer: "string",
scope_id: "string",
target: "string",
typed: div-action-typed,
url: "string"
},
...
]
},
...
],
tooltips: [
{
animation_in: {
duration: "int",
end_value: "number",
interpolator: "string",
items: [ div-animation, ... ],
name*: "string",
repeat: div-count,
start_delay: "int",
start_value: "number"
},
animation_out: {
duration: "int",
end_value: "number",
interpolator: "string",
items: [ div-animation, ... ],
name*: "string",
repeat: div-count,
start_delay: "int",
start_value: "number"
},
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_animation_selector: "string",
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
}