Ctrlk
YouTube ChannelBook A Demo🪄 Build with AIJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Container

The Container component is a versatile building block for your Dynamic Components. Think of it as a foundation for organizing and styling other components.

The Container is a flexible wrapper used to group and visually structure content. Drop other Avonni Dynamic Components inside it to organize them, apply shared styling, and control their visibility as a single unit.

Overview

The Container acts as a wrapper for other components, providing several key benefits:

Organization and Structure

  • Grouping: Logically group related components together. This improves the organization of your Dynamic Component and makes it easier to understand and maintain.

  • Visual Hierarchy: Create a clear visual hierarchy by grouping elements within containers. This helps users understand the relationships between different parts of your UI.

Styling and Layout

  • Consistent Styling: Apply styles (colors, borders, padding, etc.) to the Container, which will be applied to all components within the container. This ensures visual consistency and saves you from having to style each component individually.

  • Layout Control: Control the layout of the contained components. You can often set properties on the Container to control alignment, spacing, and other layout aspects.

  • Background and Borders: Easily add background colors or borders around a group of components.

Flexibility and Reusability

  • Easy Movement/Duplication: Move or duplicate an entire group of components simply by dragging or copying the Container. This is much easier than moving each component individually.

  • Component Nesting: You can even nest Containers within other Containers, creating complex and hierarchical layouts.

Inherited Visibility

  • Simplified Visibility Control: A crucial feature of the Container is that it controls the visibility of its contained components. If you set the Container's Visible property to false (or bind it to a condition that evaluates to false), all components inside the Container will be hidden, regardless of their individual Visible settings. This simplifies managing the visibility of entire sections of your UI.

In essence, the Container component provides a powerful way to group, style, organize, and control the visibility of multiple components, leading to more maintainable and visually appealing Dynamic Components.

Configuration

The Container has a single slot where you can drag and drop any other Avonni Dynamic Component. This allows you to create complex layouts and group related components together. For example, you could drag multiple components into a Container to create a section with a specific background color or image.

How to place another component inside the container

To configure the Container, select it on the canvas. The Edit Container panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

Properties

Variant

The Variant setting changes the overall appearance of the container. Choose a visual style:

  • Standard (Default): A basic container with no additional styling.

  • Box: Adds a subtle border and padding.

  • Card: Currently renders the same as Standard: it applies no border, background or shadow of its own. To frame a container, use Box, or the Border and Background settings on the Style tab.

The same content in three containers side by side, standard with no framing, box with a border and padding, and card with no framing
The three Variant values, each holding the same content. Only Box adds framing: Card renders like Standard.

Background Image

Use the Background Image URL or Expression setting to give the container a background. Provide an image URL or an expression, or click Select Image to upload a file. Supported formats include APNG, AVIF, GIF, JPG/JPEG, PNG, SVG, and WebP.

Overlay Color

The Overlay Color setting applies a color overlay on top of the background image. Opacity can be adjusted to control the intensity of the overlay, which is useful for enhancing the readability of content placed over the image or creating a specific visual effect.

The same background image in two containers side by side, the second darkened by a dark blue overlay at partial opacity
The same Background Image URL or Expression without and with an Overlay Color.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Use Cases

chart-userUser Activity Report

Styling

The Style tab gives you fine-grained control over the Container's appearance. Configure it from the Style tab of the Edit Container panel.

Controls the outer spacing around the container, creating space between it and other elements on the page.

  • Top / Right / Bottom / Left: Adjust the space on each side of the container.

Controls the inner spacing between the container's border and the components placed inside it.

  • Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Controls the container's dimensions.

  • Width / Height: Set fixed dimensions for the container.

  • Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.

  • Overflow: Control how content that exceeds the bounds is handled.

Customizes the border surrounding the container.

  • Color: Set the border color.

  • Size: Adjust the border thickness.

  • Style: Choose a border style (e.g. solid, dashed, dotted).

  • Radius: Control the roundness of the corners.

Sets the container's background fill.

  • Color: Set the background color.

  • Size: Control how a background image is sized.

  • Alignment: Position the background image within the container.

Last updated

Was this helpful?