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 vertica l [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:
