Container

The Container is Guido’s primary building block. Nearly everything you build uses containers - they handle layout, styling, events, and child management.

Creating Containers

#![allow(unused)]
fn main() {
use guido::prelude::*;

let view = container();
}

Adding Children

Single Child

#![allow(unused)]
fn main() {
container().child(text("Hello"))
}

Multiple Children

#![allow(unused)]
fn main() {
container().children([
    text("First"),
    text("Second"),
    text("Third"),
])
}

Conditional Children

#![allow(unused)]
fn main() {
let show_extra = create_signal(false);

container().children([
    text("Always shown"),
    container().maybe_child(show_extra, || text("Sometimes shown")),
])
}

Styling

Containers support extensive styling options:

#![allow(unused)]
fn main() {
container()
    // Background
    .background(Color::rgb(0.2, 0.2, 0.3))

    // Corners
    .corner_radius(8.0)
    .squircle() // iOS-style smooth corners

    // Border
    .border(2.0, Color::WHITE)

    // Spacing
    .padding(16.0)

    // Size
    .width(200.0)
    .height(100.0)
}

See Building UI for complete styling reference.

Event Handling

Respond to user interactions:

#![allow(unused)]
fn main() {
container()
    .on_click(|| println!("Clicked!"))
    .on_hover(|hovered| println!("Hover: {}", hovered))
    .on_scroll(|dx, dy, source| println!("Scroll: {}, {}", dx, dy))
}

State Layers

Add hover and pressed visual feedback:

#![allow(unused)]
fn main() {
container()
    .background(Color::rgb(0.2, 0.2, 0.3))
    .hover_state(|s| s.lighter(0.1))
    .pressed_state(|s| s.ripple())
}

See Interactivity for the full state layer API.

Animations

Animate property changes:

#![allow(unused)]
fn main() {
container()
    .animate_background(Transition::new(200.0, TimingFunction::EaseOut))
    .animate_transform(Transition::spring(SpringConfig::BOUNCY))
}

See Animations for timing and spring options.

Visibility

Control whether a container is visible. When hidden, it takes up no space in layout, does not paint, and ignores all events.

#![allow(unused)]
fn main() {
// Static
container().visible(false)

// Reactive signal
let show = create_signal(true);
container().visible(show)

// Reactive closure
container().visible(move || tab.get() == "settings")
}

Unlike .maybe_child() which adds or removes a child from the tree, .visible() keeps the widget in the tree but hides it completely. This is useful when you want to toggle visibility without recreating the widget and its state.

Scrolling

Make containers scrollable when content overflows:

#![allow(unused)]
fn main() {
container()
    .width(200.0)
    .height(200.0)
    .scrollable(ScrollAxis::Vertical)
    .child(large_content())
}

Scroll Axes

Axis	Description
`ScrollAxis::None`	No scrolling (default)
`ScrollAxis::Vertical`	Vertical scrolling only
`ScrollAxis::Horizontal`	Horizontal scrolling only
`ScrollAxis::Both`	Both directions

Custom Scrollbars

#![allow(unused)]
fn main() {
container()
    .scrollable(ScrollAxis::Vertical)
    .scrollbar(|sb| {
        sb.width(6.0)
          .handle_color(Color::rgb(0.4, 0.6, 0.9))
          .handle_hover_color(Color::rgb(0.5, 0.7, 1.0))
          .handle_corner_radius(3.0)
    })
}

Hidden Scrollbars

#![allow(unused)]
fn main() {
container()
    .scrollable(ScrollAxis::Vertical)
    .scrollbar_visibility(ScrollbarVisibility::Hidden)
}

Complete Example

Here’s a fully-styled interactive button:

#![allow(unused)]
fn main() {
fn create_button(label: &str, on_click: impl Fn() + 'static) -> Container {
    container()
        // Layout
        .padding(16.0)

        // Styling
        .background(Color::rgb(0.3, 0.5, 0.8))
        .corner_radius(8.0)
        .border(1.0, Color::rgb(0.4, 0.6, 0.9))

        // Animations
        .animate_background(Transition::new(200.0, TimingFunction::EaseOut))
        .animate_border_width(Transition::new(150.0, TimingFunction::EaseOut))

        // State layers
        .hover_state(|s| s.lighter(0.1).border(2.0, Color::rgb(0.5, 0.7, 1.0)))
        .pressed_state(|s| s.ripple().darker(0.05).transform(Transform::scale(0.98)))

        // Event
        .on_click(on_click)

        // Content
        .child(text(label).color(Color::WHITE))
}
}