Overview#

The layout container is a set of containers designed to simplify page layout. There are five types: Top, Left, Main, Right, and Bottom. The layout is not affected by the coding order.

Types#

1. Top: Defaults to being sticky at the top. To avoid conflicts with Main's styles, Top does not have title or subtitle properties.
2. Left: Positioned to the left of Main.
3. Main: The core structure of the container and must exist. Even if it is not explicitly coded, a <Main> element will be assigned during compilation.
4. Right: Positioned to the right of Main.
5. Bottom: Defaults to being sticky at the bottom.

Element#

Layout inherits the basic functionality and properties of Box. For more details, refer to the Box documentation.

Layout consists of a header area and a content area:

1. Header area: The left side is used to display summary information about the content (e.g., title, subtitle), while the right side is used for common actions.
2. Content area: Used to place components or embedded containers that carry content, such as (Module, Form, Table, etc.).

Size#

To ensure a clear hierarchy, size restrictions are applied to the layout. You can place the most important content in Main.

Name	Height	Width
Top	Minimum 10px, maximum 30%	Full width
Left	Full height	Minimum 10px, maximum 30%
Main	Minimum 10px	Minimum 10px
Right	Full height	Minimum 10px, maximum 30%
Bottom	Minimum 10px, maximum 30%	Full width

Nesting#

Layout containers follow a hierarchical principle. Each layout container acts as both a child of its parent container and a parent to its child containers. Other container components can be nested inside according to the rules. Nesting is unlimited, and there is no visual style change during nesting.