TABLE OF CONTENTS
The Container is a special Component that groups other Components together. It provides layout controls that allow you to position elements relative to one another within the Container. By grouping multiple Containers within a Container, you can create complex layouts with several Components that interact with each other.
This article focuses on settings specific to the Container Component. For general settings, see Altering the appearance of an App Studio Component.
Container Settings
The following settings are available for the Container Component:
| Setting | Description |
|---|---|
| Layout | Grid: Components are positioned using absolute coordinates relative to the parent container. Horizontal: Components are positioned in a horizontal order. Vertical: Components are positioned in a vertical order. |
| Horizontal and Vertical Scroll | Specify when scroll bars should appear in the container. |
| Justification (appears for horizontal or vertical layout) | Configure the unused spacing between components within a Container: Start, middle, end: Align components to the start, middle, or end of the container, leaving all unused space between the components and the parent container. Space between: Position the first and last components at the edge of the container, with equal spacing between all other components. Space around: Configure equal spacing on both sides of each component. Space evenly: Configure equal spacing between components and the container edges. Stretch: Expand components to fill the available space up to the container's edges. |
| Horizontal or Vertical Alignment (appears for horizontal or vertical layout) | Position components along the opposite axis of the selected layout. |
| Gap (appears for horizontal or vertical layout) | Set a fixed gap size between components within the container. |
Example: Creating a Profile Section
To demonstrate the customization of the Container Component, let’s create a Profile Section that includes:
- An Image Component for the profile picture.
- A Text Component for the user’s name.
- A Button Component labeled “Edit Profile”.
We will group these components in a child Container to style and align them together. This container will be placed inside a parent Container to manage overall layout.
We will use the following settings to style and position the components within the child container:
- Layout: Vertical.
- Vertical scroll: Never.
- Vertical justification: Space evenly.
- Horizontal alignment: Middle.
- Gap: 5.
You can proceed by customizing additional child containers and adjusting the parent container to create a well-organized layout.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article