Container

A container groups multiple objects together.

Grouped objects' coordinates are relative to the container's position.

It can be scrollable, vertically or horizontally with optional snap effect.

Its contents can be set dinamically with the Content attribute.

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

="mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when parent's layout is neither "flex" nor "grid".

When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.

Flex Grow

Specifies if the objects should grow to fill the available space.

Attribute Values

Value	Description
false	Default value. Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

Attribute Values

Value	Description
false	Default value. Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when parent's layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Width

Sets the object's width in pixels.

Minimum value is 16.

Height

Sets the object's height in pixels.

Minimum value is 16.

Layout

Layout

Specifies the layout of the container

The layout defines how the objects inside the container are displayed.

Flex layout automatically distribute the contained objects in a column or row, with the possibility to justify and align them.

Grid layout allows to define a grid of rows and columns where the objects are placed.

Attribute Values

Value	Description
block	Default value. Block layout.
flex	Flexible layout.
grid	Grid layout.

The default value is: block.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Flex Direction

Specifies the direction of the objects.

Attribute Values

Value	Description
row	Default value. The contained objects are displayed horizontally, as a row.
column	The contained objects are displayed vertically, as a column.
row-reverse	The contained objects are displayed horizontally, as a row, in reverse order.
column-reverse	The contained objects are displayed vertically, as a column, in reverse order.

This attribute is available when layout is "flex".

The default value is: row.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Flex Gap

Defines the size of the gap between the rows and between the columns in flex mode.

Attribute Values

Value	Description
<int>	Pixel size of the gap.

This attribute is available when layout is "flex".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Flex Wrap

Specifies whether the objects inside the container should wrap or not.

Attribute Values

Value	Description
nowrap	Default value. Specifies that the objects will not wrap.
wrap	Specifies that the objects will wrap if necessary.
wrap-reverse	Specifies that the objects will wrap, if necessary, in reverse order.

This attribute is available when layout is "flex".

The default value is: nowrap.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Flex Justify Content

Aligns the contained objects when they do not use all available space on the main axis.

The main axis is in the flex direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical).

Attribute Values

Value	Description
start	Default value. Objects are positioned at the beginning of the container.
end	Objects are positioned at the end of the container.
center	Objects are positioned in the center of the container.
space-between	Objects will have space between them.
space-around	Objects will have space before, between, and after them.
space-evenly	Objects will have equal space around them.

This attribute is available when layout is "flex".

The default value is: start.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Flex Align Items

Specifies how the lines of contained objects are distributed along the cross axis.

The main axis is in the flex direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical).

Attribute Values

Value	Description
stretch	Default value. Objects are stretched to fill the container.
start	Objects are positioned at the start of the container.
end	Objects are positioned at the end of the container.
center	Objects are positioned in the center of the container.
baseline	Objects are positioned at the baseline of the container.

This attribute is available when layout is "flex".

The default value is: stretch.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Flex Align Content

Specifies how the lines of contained objects are distributed along the cross axis.

The main axis is in the flex direction (default is 'row', horizontal), and the cross axis is perpendicular to the main axis (default is 'column', vertical).

This attribute only applies if there are multiple lines of objects.

Attribute Values

Value	Description
stretch	Default value. Lines stretch to take up the remaining space.
start	Lines are packed toward the start of the container.
end	Lines are packed toward the end of the container.
center	Lines are packed toward the center of the container.
space-between	Lines are evenly distributed in the container.
space-around	Lines are evenly distributed in the container, with half-size spaces on either end.
space-evenly	Lines are evenly distributed in the container, with equal space around them.

This attribute is available when layout is "flex" and flexwrap is not "nowrap".

The default value is: stretch.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Grid Template Columns

Specifies the columns of the grid.

Write one size for each column, separated by spaces.

Supported sizes include fixed pixels such as 200px, flexible fractions such as 1fr, or expressions such as minmax(120px, 1fr).

Attribute Values

Value	Description	Example
1fr 1fr	Two equal-width columns.
200px 1fr 1fr	A fixed first column followed by two flexible columns.	200px 1fr 1fr
minmax(120px, 1fr) minmax(120px, 1fr)	Two columns with a minimum width of 120 pixels each.	minmax(120px, 1fr) minmax(120px, 1fr)

This attribute is available when layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Grid Template Rows

Specifies the rows of the grid.

Write one size for each row, separated by spaces.

Supported sizes include fixed pixels such as 60px, automatic size with auto, flexible fractions such as 1fr, or expressions such as minmax(48px, auto).

Attribute Values

Value	Description	Example
auto auto	Two automatic-height rows.
60px auto	A fixed first row followed by an automatic row.	60px auto
minmax(48px, auto) minmax(48px, auto)	Two rows with a minimum height of 48 pixels.	minmax(48px, auto) minmax(48px, auto)

This attribute is available when layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Grid Column Gap

Defines the gap between grid columns in pixels.

Attribute Values

Value	Description
<int>	Pixel size of the column gap.

This attribute is available when layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Grid Row Gap

Defines the gap between grid rows in pixels.

Attribute Values

Value	Description
<int>	Pixel size of the row gap.

This attribute is available when layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Panel

Panel

Shows a panel that frames the object. Its style can be modified.

Attribute Values

Value	Description
true	Shows the panel.
false	Default value. Hides the panel.

Default behavior:

• By default, this attribute defaults to false.
• Otherwise, this attribute defaults to false.

Panel Color

Specifies the panel color.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight important areas.
warning	Warning color, used to highlight warning areas.
success	Success color, used to highlight success areas.
error	Error color, used to highlight error areas.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

This attribute is available when panel is "true".

The default value is: default.

Panel Custom Color

Specifies the panel custom color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when panelstyle is "custom" or panelstyle is "glass" or panelcolor is "custom".

Scrolling

Scrollable

Specifies if the container's content is scrollable.

Attribute Values

Value	Description
false	Default value. Not scrollable.
vertical	Vertically scrollable.
horizontal	Horizontally scrollable.
both	Both vertically and horizontally scrollable.
hidden	Content is clipped, no scrollbars.

The default value is: false.

Scrollbar

If scrollable, specifies if the scrollbar should be visible.

Attribute Values

Value	Description
hidden	Default value. Scrollbar is not visible.
visible	Scrollbar is always visible.
auto	Scrollbar is visible when the content's size is greater than the container's.

This attribute is available when scrollable is not empty.

The default value is: hidden.

Scroll Snap

Specifies where objects will snap into focus when you stop scrolling.

Attribute Values

Value	Description
none	No scroll snap effect.
start	Scroll snap at start of objects on x- and y-axis.
end	Scroll snap at end of objects on x- and y-axis.
center	Scroll snap at center of objects on x- and y-axis.

This attribute is available when scrollable is not empty.

Scroll Padding

Specifies the distance from the container to the snap position of container objects.

This means that when you stop scrolling, the scrolling will quickly adjust and stop at a specified distance from the container to the snap position of the child element in focus.

Attribute Values

Value	Description
<int>	Padding in pixels.

This attribute is available when scrollable is not empty.

Content

Content

Specifies the content of the container, as an array of JSON objects.

Each JSON object has the following structure:

{
    "id": "object_id",
    "type": "object_type",
    "attrs": {
        "attr1": "value1",
        "attr2": "value2",
        ...
    }
}

E.g.:

[
    {
        "id": "text1",
        "type": "text",
        "attrs": {
            "pos": "x1y10",
            "text": "Hello World!"
        }
    }
]

The JSON can be easily copied from the Project Editor. Just create the objects, select them and copy them to the clipboard with the context menu or keyboard shortcut.

Attribute Values

Value	Description
<JSON string>	Content.

note

This attribute is live. It can't be set from the Project Editor, it needs to be set dynamically with a UISet.

View

Visible

Sets the object's visibility.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

The default value is: true.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

The default value is: true.

Blink

Blinks the object at the specified speed.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

The default value is: false.

Transition

Specifies the transition effect when the object is shown or hidden.

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Duration

Specifies the transition duration in milliseconds.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Delay

Specifies the transition delay in milliseconds.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

The default value is: 1.0.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

Attribute Values

Value	Description	Example
<int>	Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the margin in pixels for each side of the object.	10 20 30 40

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.