Struct ElementHandle 

pub struct ElementHandle<'a> { /* private fields */ }

Handle returned by Elements::add for chaining .key() and .width().

This handle has a builder-style API — call methods on it immediately after adding a component to an Elements list:

let mut els = Elements::new();
els.add(Spinner::new("loading..."))
    .key("my-spinner")
    .width(WidthConstraint::Fixed(20));

Implementations

impl<'a> ElementHandle<'a>

pub fn key(self, key: impl Into<String>) -> Self

Set a key for stable identity across rebuilds.

Keyed elements are matched by key during reconciliation, allowing them to survive position changes. Without a key, elements are matched by position and type.

Examples found in repository

examples/lifecycle.rs (line 125)

fn task_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    els.add(
        TextBlock::new().line(
            format!("Tasks ({})", state.tasks.len()),
            Style::default()
                .fg(Color::White)
                .add_modifier(Modifier::BOLD),
        ),
    );

    for task in &state.tasks {
        els.add(StatusLog::new(task)).key(task.clone());
    }

    if state.processing {
        els.add(Spinner::new("Processing...")).key("spinner");
    }

    els.add(TextBlock::new().line("---", Style::default().fg(Color::DarkGray)));

    els
}

examples/declarative.rs (line 46)

fn chat_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    // Render all messages with stable keys
    for (i, msg) in state.messages.iter().enumerate() {
        els.add(Markdown::new(msg)).key(format!("msg-{i}"));
    }

    // Show thinking spinner if active (auto-animates via tick registration)
    if state.thinking {
        els.add(Spinner::new("Thinking...")).key("thinking");
    }

    // Show tool call spinner if active (auto-animates via tick registration)
    if let Some(ref tool) = state.tool_running {
        els.add(Spinner::new(format!("Running {}...", tool)))
            .key("tool");
    }

    // Separator at the bottom
    if !state.messages.is_empty() || state.thinking || state.tool_running.is_some() {
        els.add(TextBlock::new().line("---", Style::default().fg(Color::DarkGray)));
    }

    els
}

examples/chat.rs (line 240)

fn chat_view(state: &AppState) -> Elements {
    let mut els = Elements::new();

    for msg in &state.messages {
        let key = format!("msg-{}", msg.id);
        match &msg.kind {
            MessageKind::User(text) => {
                els.add(
                    TextBlock::new().line(
                        format!("> {}", text),
                        Style::default()
                            .fg(Color::Cyan)
                            .add_modifier(Modifier::BOLD),
                    ),
                )
                .key(key);
            }
            MessageKind::Assistant { content, done } => {
                if *done {
                    els.add(Markdown::new(content)).key(key);
                } else if content.is_empty() {
                    els.add(StreamingDots).key(key);
                } else {
                    // Show content with a blinking cursor
                    els.add(Markdown::new(format!("{}▌", content))).key(key);
                }
            }
        }
    }

    // Separator
    els.add(TextBlock::new());

    // Input box
    els.add(InputBox {
        text: state.input.clone(),
        cursor: state.cursor,
        prompt: "You".into(),
    })
    .key("input");

    els
}

pub fn width(self, constraint: WidthConstraint) -> Self

Set the width constraint for this element within a horizontal container.

Only meaningful when the element is a child of an HStack. Fixed(n) reserves exactly n columns. Fill (default) takes remaining space, split equally among Fill siblings.