Styling

Style and layout are props, written inline in a view, alongside its children.

Props

Each prop is assigned by name inside a view's braces. Layout follows flexbox. Props explains how they work.

Container {
    padding = Padding::all(16_px),
    gap = 8_px,
    flex_direction = Direction::Column,
    align_items = Align::Center,
    background_color = Color::from_hex("#111").unwrap(),
    corner_radius = CornerRadius::all(8.f),
    border = Border { 1.f, Color::DIM_GRAY },

    Text { "Styled", color = Color::WHITE, font_size = 18.f },
}

Lengths use literals like 16_px, and rows and columns are containers with the direction already set.

Interaction states

Interaction states each take a block of props that applies only while the state is active.

Container {
    background_color = accent.set_a(0.25f),
    hover = {
        cursor = Cursor::Pointer,
        background_color = accent.set_a(0.55f),
    },
    pressed = { background_color = accent },
}

Theme

Built-in components like TextInput and Dropdown take their defaults from the Theme in the environment, with a light and a dark palette. Anything set inline takes precedence.

Reusable styles

A set of props can be built once and reused wherever it's needed.

Styles fill() {
    return {
        position = Position::Absolute,
        top = 0_px, right = 0_px, bottom = 0_px, left = 0_px,
    };
}