Container Component Documentation

Overview

The Container Component serves as a versatile layout wrapper that helps group, align and structure child components in a defined space. It's a flexible tool for managing the visual organization of UI elements.

---

Key Features

• Flexible Layout

• Customisable Styling

• Child Management

---

Component Fields

Background

1. Background

Click the field to choose between None, Color, or Image.

• If Color is selected, additional fields will appear, allowing you to choose a "Color", "Apply gradient" and adjust "Opacity".

• If Image is selected, you can upload an "Image" and adjust its "Opacity".

Layout

2. Scrollable

Tick this checkbox to allow scrolling within the container.

• Once enabled, you'll see an additional option to 'Keep offscreen elements active.' Check this option if you want offscreen content to remain functional.

3. Axis

Click the Axis field to select the desired alignment. Options include:

• X:aligns containers horizontally.

• Y:aligns containers vertically.

• Z:stacks containers on top of each other.

4. Width

This allows you to set the horizontal size of your button. Click the % symbol to switch between percentage-based sizing and exact pixel measurements. When using the percentage option, the % value you set for your button is relative to the size of its container.

5. Height

This allows you to set the vertical size of your button. Click the % symbol to switch between percentage-based sizing and exact pixel measurements. When using the percentage option, the % value you set for your button is relative to the size of its container.

6. Padding

This section allows you to adjust the container's padding, which is the space between the content inside the container and its inner edges. Keep the link enabled to apply the same padding to all four sides, or disconnect it to adjust each side individually. Padding is measured in exact pixels.

7. Margin

This section allows you to adjust the container's margins, which is the space between the container and the surrounding elements. Keep the link enabled to apply the same margin to all four sides, or disconnect it to adjust each side individually. Margins are measured in exact pixels.

Alignment

8. Horizontal

This setting determines how your component is aligned horizontally within the container. Options include:

• Start: Aligns the component to the left of the container (or right for right-to-left languages).

• Center: Aligns the component in the middle of the container.

• End: Aligns the component to the right of the container (or left for right-to-left languages).

9. Vertical

This setting determines how your component is aligned vertically within the container. Options include:

• Top: Aligns the component to the top of the container.

• Center: Aligns the component in the middle of the container.

• Bottom: Aligns the component to the bottom of the container.

10. Spacing

This setting determines the space between components within the container. Options include:

• None: No additional spacing is applied between the components.

• Between: Equal space is added between the components, but no space at the edges.

• Around: Equal space is added around each component, including the edges of the container.

• By Value: Allows you to specify a custom spacing value (in pixels) between components.

Border

11. Thickness

Enter a value to specify the width of the container's edge. The measurement is in exact pixels.

12. Color

Click the field to select from the available color options for your container's border. These are pre-set in Colorsand can be edited in this section to match your app's theme.

13. Radius

This section lets you adjust the curvature of the container's corners. Keep the link enabled to modify all four corners simultaneously, or disconnect it to adjust each corner individually. The measurement is in exact pixels.

Effects

14. Shimmer

Tick the checkbox to apply a shimmer effect to your component within the container. This effect adds a dynamic visual highlight, enhancing the component's appearance and drawing attention to it.

15. Opacity

Enter a value to set the opacity level of your component. This number ranges from 0 (completely transparent) to 100 (completely opaque), allowing you to control the visibility and layering of the component within the container.

On Click

16. Action Creator

This field allows you to define the specific action that will occur when the button is clicked. To set up the action, click on the field to display the action options and select the desired action from the list. Click here to learn more about Actions.

Layout Advanced

17. Min Width

This setting specifies the smallest width that the component can have. By entering a value in pixels, you ensure that the component will not shrink below this size, helping maintain its usability and layout integrity across different screen sizes.

18. Min Height

This setting defines the smallest height that the component can have. Similar to minimum width, entering a pixel value ensures the component remains functional and visually appealing without becoming too compressed.

19. Max Width

This setting indicates the largest width that the component can expand to. By specifying a value in pixels, you can prevent the component from becoming excessively wide, which could disrupt the layout and user experience.

20. Max Height

This setting establishes the largest height that the component can reach. Specifying a pixel value ensures that the component does not grow too tall, maintaining a cohesive design and preventing overflow issues in the container.

21. Over flow

Tick the checkbox to enable overflow for your component. This setting allows content that exceeds the boundaries of the container to be handled in specific ways, such as displaying scrollbars or hiding excess content. You can choose how to manage overflow behavior, enhancing user interaction and content accessibility.

---

Best Practices for Using the Container Component

• Responsive Design: Use relative units (e.g., percentages) for width and height to ensure the container adapts well across devices.

• Maintain Structure: Group related components within containers to improve readability, modularity and maintainability of the UI.