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.

Combobox Tutorial Examples

User Activity Report

---

Setting Up Your Container

1. Drag the Container and drag other components inside

The Container component 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

2. Customize the Container

• Variant: Choose a visual style for the container:

  • Standard: A basic container with no additional styling.

  • Box: Adds a subtle border and padding.

  • Card: Creates a card-like container with a shadow effect.

• Background Image: Upload an image for the container's background.

• Overlay Color: Add a semi-transparent overlay color to the background image to enhance readability or create a specific visual effect.

Why Use the Container Component?

The container component is an excellent component block for creating well-structured and visually appealing layouts for Avonni Dynamic Components. It 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.