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

// Children use chained .child() calls
ui! {
    <div>
        {"First"}
        {"Second"}
    </div>
}
// -> 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>
}
// -> div().children(items)

// Can be mixed with regular children
ui! {
    <div>
        {"Header"}
        {..items}
        {"Footer"}
    </div>
}
// -> 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)}
    </div>
}

Comments

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

Components

ui! { <Header/> }                 // -> Header::new()
ui! { <{NavItem::new(path)}/> }   // -> NavItem::new(path)

Expression Tags

// Self-closing expression tag
ui! { <{Container::new(title)}/> }

// Expression tag with attributes and children
ui! {
    <{Container::new(title)} flex>
        {"Content"}
    </{}>
}