> For the complete documentation index, see [llms.txt](https://appmaster.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appmaster.gitbook.io/docs/web-apps/components-list/container.md).

# Container

Used to group elements

## **Look\&Feel Settings:**

**Name** (mandatory) - name of component\
\
**Direction** (mandatory) - how elements are arranged inside the container, vertically or horizontally. Horizontall 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.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FORO4wH5MnL1P5qwuT2sk%2Fimage.png?alt=media\&token=92d461e7-27a0-45c4-90e9-911f675ed95a)

## **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.\
  &#x20;\ <br>

## **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;&#x20;
* **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.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FXX3xtzLIb7vuEGxwvQEX%2Fimage.png?alt=media\&token=0252b50a-d90b-4f73-8a58-9da8cea57619)

### **Container set properties**

Sets all container's properties

**Input** parameters:

* **Component Id** \[string] *-* container component's identifier;
* **Width** \[string] - components's width;&#x20;
* **Height** \[string] - components's height;
* **Flex direction** \[enum] - components's direction;
* **Wrap** \[enum] - component's 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.\ <br>

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FyodRKPzXsHZw2jk7dLUG%2Fimage.png?alt=media\&token=c43c3930-142c-45d0-8751-b1ee2fdc3ef4)

### **Container update properties**

Update container's properties

**Input** parameters:

* **Component Id** \[string] *-* container component's identifier;
* **Width** \[string] - components's width;&#x20;
* **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 stat&#x65;**.**\ <br>

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F8Y0jn0dj0LFxpruBbscq%2Fimage.png?alt=media\&token=8b8380e3-dce0-4d61-b95d-dac78d0c9657)

## Usage example

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

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FguJCapyntPDDU77YZpsc%2Fimage.png?alt=media\&token=f82937d1-7251-43fb-be32-5fc498c947ce)