Panel

ic.Panel is a simple grouping container with no visual styling of its own. It renders its children in a plain <div> and provides a CSS target (.ic-panel) for custom styling. Use it to logically group related components, build form rows, or create styled sections like cards and banners via css.style().

Basic usage

Add child components with addChild. Panel imposes no layout on its children by default.

Nesting

Panels can be nested to create logical groups. Each panel gets its own .ic-panel scope, so you can style inner panels differently from outer ones. This is useful for building form layouts where each row is its own panel.

Custom styling

Since Panel is unstyled by default, the custom styling section is where it comes to life. Target .ic-panel to turn it into a card, a banner, or any other container style.

p = ic.Panel();
p.addChild(ic.Label(Text="System Status"));
p.addChild(ic.Label(Text="All services operational."));

% Turn the panel into a card
p.css.style(".ic-panel", ...
    "background", "linear-gradient(135deg, #f0f9ff, #ede9fe)", ...
    "border", "1px solid #c7d2fe", ...
    "border_radius", "10px", ...
    "padding", "16px 20px", ...
    "box_shadow", "0 2px 8px rgba(0,0,0,0.06)");