Container

Look and Feel Settings:

Name (mandatory) - name of component.

Direction (mandatory) - how elements are arranged inside the container, vertically or horizontally. Horizontal be default.

Wrap (mandatory) - wrapping content when it goes beyond the bounds of the container. Nowrap by default

Alignment (mandatory) - alignment of elements in a container. Start by default.

Sizes (mandatory) - container dimensions. In pixels or percentage. Width 100% by default

Max Width (mandatory) - maximum container width in pixels or percentage. 100% by default.

Margin (mandatory) - outer indent. 0 by default.

Padding (mandatory) - inner indent. 0 by default Image, Gradient or Overlay (not mandatory) - for background.

Background color (not mandatory) - primary color for background.

Border (not mandatory) - component border settings.

Visible (mandatory) - makes the component visible if turned on. Enabled by default.

Workflow triggers:

• onCreate – fires when the element is created on the page;
• onShow – fires when the component changes its state to visible (displayed on the page); 
• onHide – fires when the component changes its state to hidden (stops being displayed);
• onDestroy – fires when the component is destroyed;
• onClick - fires when the component is clicked. 

Component Actions:

Container get properties

Gets the container's properties.

Input parameters:

• Component Id [string] - container component's identifier.

Output parameters:

• Width [string] - components's width;
• Height [string] - components's height;
• Flex direction [enum] - components's direction;
• Wrap [enum] - components' wrap;
• Alignment horizontal [enum] - componet's alignment by horizontal;
• Alignment vertical [enum] - component's alignment by vertical;
• Margin [string] - component's margin;
• Padding [string] - component's padding;
• Border [string] - component's border;
• Background color [string] - component's background color;
• Visible [boolean] - component visibility state.

Container set properties

Gets the container's properties.

Input parameters:

• Component Id [string] - container component's identifier.

Output parameters:

• Width [string] - components's width;  
• Height [string] - components's height;
• Flex direction [enum] - components's direction;
• Wrap [enum] - components' wrap;
• Alignment horizontal [enum] - componet's alignment by horizontal;
• Alignment vertical [enum] - component's alignment by vertical;
• Margin [string] - component's margin;
• Padding [string] - component's padding;
• Border [string] - component's border;
• Background color [string] - component's background color;
• Visible [boolean] - component visibility state.

Container update properties

Update container's properties

Input parameters:

• Component Id [string] - container component's identifier;
• Width [string] - components's width;
• Height [string] - components's height;
• Flex direction [enum] - components's direction;
• Wrap [enum] - components' wrap;
• Alignment horizontal [enum] - componet's alignment by horizontal;
• Alignment vertical [enum] - component's alignment by vertical;
• Margin [string] - component's margin;
• Padding [string] - component's padding;
• Border [string] - component's border;
• Border radius [string] - component's border radius;
• Background color [string] - component's background color;
• Visible [boolean] - component visibility state.

Usage example

A container can be used to group elements. For example, to assemble a form from several different input fields: