Container

A generic layout wrapper that holds other widgets. The Container is the primary building block for creating structured layouts using CSS flexbox or grid.

Properties

Property	Type	Default	Description
className	text	''	Optional CSS class name(s) to apply to the container element.

Events

• onClick -- Fires when the container is clicked. Attach an action to make the entire container clickable (e.g., a clickable card or row).

Container

This widget is a container -- you can drag other widgets inside it.

Example

Create a two-column layout:

1. Add a Container (outer wrapper).
2. In the Design tab, set display: flex, flex-direction: row, gap: 16px.
3. Add two Container children inside it, each with flex: 1.
4. Place your content widgets inside each child container.

Create a centered card layout:

1. Add a Container.
2. Set display: flex, justify-content: center, align-items: center, min-height: 400px.
3. Add a Card widget inside it.

Tips

• The Container is invisible by default -- it has no background, border, or padding. Use the Design tab to style it.
• Use display: flex for one-dimensional layouts (rows or columns) and display: grid for two-dimensional grids.
• Containers can be nested to any depth for complex layouts.
• The className property lets you apply custom CSS classes from your theme or a custom stylesheet.
• Add an onClick event to make the container behave like a clickable card or row.