Container

Introduction

The Container component represents a div tag that wraps other components, providing a way to group and organize content. It can be used to add padding, margins, and other styles to a group of components. It is also especially useful to define and maintain a consistent layout for components within your form.

Container does not provide any Main properties aside from the required Key configuration and additional options. However, it provides a comprehensive list of style properties that corresponds to general screen style configuration options.

Main properties

At the bottom of the Main properties menu, you can find additional options:

• Render When: Provides conditional rendering for your calendar as described in the corresponding chapter.
• HTML attributes: Allows you to provide custom HTML attributes for your form.

Style properties

These properties allow you to customize the size, color, and other style options:

Name	Type	Description
For Device	choice	Provide component's style customization for all devices or specific devices by using this dropdown list
Direction	choice	Direction of the container's layout (e.g., row, column, etc.)
Gap	number	Spacing between the container's children (e.g., 10px).
Align Items	choice	Alignment of the container's children (e.g., center, start, etc.)
Justify	choice	Justification of the container's children (e.g., center, space-between, etc.)
Flex Wrap	choice	Specified the wrap options for the container's children (i.e., wrap, nowrap, or wrap reverse)
Width	number	Sets the width of the container
Height	number	The height of the container
Margin Top	number	The top margin of the container
Margin Right	number	The right margin of the container
Margin Bottom	number	The bottom margin of the container
Margin Left	number	The left margin of the container
Color	number	The text color of the container
Background Color	number	The background color of the container
Class Name	string	Add a class name for your container for the subsequent styling if necessary