Container

Container is the box every layout is built from. It holds other views, arranges them with flexbox, and can fill, outline and round its edges.

Light

Dark

ContainerLive preview soon

Layout

Children go inside the braces, after any props. They're laid out in a row by default:

cpp

Container {
    gap = 8_px,
    padding = Padding::all(12_px),
    align_items = Align::Center,

    Icon { LucideIcon::Folder },
    Text { "Levels" },
}

Row and Column are containers with the direction already set, which keeps nested layouts easy to read:

cpp

Column {
    gap = 4_px,
    Text { "Forest", font_size = 15.f },
    Text { "12 layers", color = Color::GRAY },
}

Sizing follows flexbox: width, height, their minimums and maximums, and flex_grow to fill the remaining space.

Fill and outline

cpp

Container {
    padding = Padding::all(16_px),
    background_color = Color::from_hex("#1e1f24").unwrap(),
    border = Border { 1.f, Color::DIM_GRAY },
    corner_radius = CornerRadius::all(10.f),
}

Interaction

A container responds to the pointer through event handlers and interaction states. A tooltip appears after a short hover:

cpp

Container {
    on_click = [](State& state) { state.open = !state.open; },
    tooltip = "Show details",

    background_color = accent.set_a(0.2f),
    hover = { cursor = Cursor::Pointer, background_color = accent.set_a(0.35f) },
    pressed = { background_color = accent },

    Text { "Details" },
}

See Styling for interaction states, and Parameters for what handlers can take.

Container ​

Layout ​

Fill and outline ​

Interaction ​

Container

Layout

Fill and outline

Interaction