Welcome to the Container Component documentation! As part of the page builder in App Platform, the Container component enables you to structure and style your content on a page within containers effortlessly. Below are instructions on how to add a Container to your canvas and customize its properties.

Adding a Container to Your Page

  1. Access the Canvas: Open the page you're working on in your drag-and-drop website builder.

  2. Drag-and-Drop: Locate the Container component in your component library, then drag and drop it onto the canvas.

Configuring the Container

  1. Select the Container: Click on the added container to select it.

  2. Properties Panel: On the properties panel, you'll find various configurable options:

    • Background Color: Set the background color of the container.

    • Text Color: Define the text color within the container.

    • Flex Direction: Choose the direction of the container's flex items ('row', 'column', etc.).

    • Alignment (Align Items and Justify Content): Align the container's flex items on the cross-axis and main-axis.

    • Fill Space: Toggle to make the container fill available space.

    • Width and Height: Adjust the width and height of the container.

    • Padding and Margin: Set the padding and margin around the container.

    • Shadow Depth: Control the shadow depth of the container.

    • Border-Radius: Customize the border-radius of the container.

  3. Live Preview: The canvas provides a live preview of your container as you make changes.

Grid Container vs. Container

  • Container Component: The Container component is a versatile element for structuring content and styling containers. It allows for flexible arrangements but does not enforce a grid structure.

  • Grid Container Component: The Grid Container component, on the other hand, is specifically designed to create layouts with a grid structure. It simplifies the process of aligning and organizing content in a grid format.

Why Use the Container Component?

  • Structure Content: Containers help organize and structure content on your webpage.

  • Style Flexibility: Customize the appearance of your containers with various styling options.

Now you're ready to create well-designed and structured containers for your website! If you have any questions or need assistance, feel free to reach out to our support team. Happy designing! πŸŽ¨πŸš€

Last updated