Macro ui 

ui!() { /* proc-macro */ }

A declarative markup macro for building GPUI UIs.

Syntax

Basic Elements

ui! { div {} }                        // -> div()
ui! { div { [flex] } }                // -> div().flex()
ui! { div { [w: px(200.0)] } }        // -> div().w(px(200.0))

Children

// Comma-separated children
ui! {
    div {
        "First",
        "Second",
    }
}
// -> div().child("First").child("Second")

Spread Children

Use ..expr to spread an iterable as children:

let items: Vec<Div> = vec![div(), div()];

ui! {
    div {
        ..items,
    }
}
// -> div().children(items)

// Can be mixed with regular children
ui! {
    div {
        "Header",
        ..items,
        "Footer",
    }
}
// -> div().child("Header").children(items).child("Footer")

Method Chains

Use .method(args) to insert method calls at any position. Supports method chains and generics:

ui! {
    div {
        "static child",
        .when(condition, |d| d.child("dynamic")),
        .flex().gap_2(),
        .map::<Div, _>(|d| d),
    }
}

Comments

Use standard Rust comments (// or /* */) inside ui!.

Expression Elements

Any expression can be used as an element (braces required):

ui! { Button::new("Click") {} }              // -> Button::new("Click")
ui! { Button::new("Click") { [style: Primary] } }
                                             // -> Button::new("Click").style(Primary)
ui! {
    div().flex() { [flex_col]
        "Content",
    }
}
// -> div().flex().flex_col().child("Content")

// Parentheses for complex expressions (braces optional)
ui! { (a + b) }                              // -> a + b

Multi-value Attributes

Use tuples for attributes with multiple arguments:

ui! { div { [when: (condition, |d| d.flex())] } }
// -> div().when(condition, |d| d.flex())