📦 Container

The Container widget is a fundamental structural element used to group, align, and clip other widgets. It acts as a parent object, allowing you to manage the layout and visibility of multiple components as a single unit.

---

⚙️ Properties (Props)

The Container configuration is defined by the ContainerWidget interface. It focuses on spatial organization and child management.

Property	Type	Description
Layout	Dropdown	Controls how children are arranged (e.g., Manual, Flex, or Grid).
Clip Children	boolean	If true, any part of a child widget outside the container's bounds is hidden.
Scrollable	boolean	Enables touch-based scrolling if children exceed the container size.

---

🛠 Layout Engines

Containers in Artok support advanced layout logic to make responsive design easier:

• Manual: You place child widgets at specific X/Y coordinates relative to the container's top-left corner.
• Flex: Automatically arranges children in rows or columns, handling spacing and alignment dynamically (similar to CSS Flexbox).
• Grid: Places children into a defined number of rows and columns.

---

🎨 Visual Styles

A Container can be more than just an invisible wrapper. Using the Inspector Panel, you can define:

• Background: Apply solid colors, gradients, or even a background image.
• Borders & Shadow: Add depth to your UI by giving the container a border stroke or an outer shadow.
• Opacity: Adjust the transparency of the container and all its children simultaneously.

---

⚡ Runtime API (Lua)

Containers are powerful for managing UI states via the Logic and Events system.

-- Hide an entire group of settings at once
cnt_settings:set_hidden(true)

-- Scroll to a specific position programmatically
cnt_log_view:scroll_to(0, 500, true) -- x, y, animate

-- Change the background color to indicate a system mode
if mode == "night" then
    cnt_main:set_style_bg_color(0x1A1A1A)
else
    cnt_main:set_style_bg_color(0xF0F0F0)
end

---

PERFORMANCE TIP

Use Clip Children sparingly on low-power hardware, as calculating the clipping mask for every frame adds overhead to the rendering pipeline.

---

🚀 Next Steps

• Screen — The top-level container for every UI page.
• Widget Tree — Learn how to drag and drop widgets into containers to create hierarchies.