Components

Implement View for screens that keep state. Functions that return Element work for stateless pieces.

#Defining components

struct Greeting {
    name: String,
}

impl View for Greeting {
    fn render(&mut self, _cx: &mut ViewContext<'_, Self>) -> impl IntoElement {
        text(format!("Hello, {}", self.name))
    }
}

Child views can also be functions that return Element when they have no state of their own.

#Primitives

div, text, button, text_input, text_area, img, svg, custom_shader, and VirtualList are the building blocks. submit_button submits the nearest form. Markdown uses features = ["markdown"]; Editor, CodeBlock, and DiffView use features = ["editor"]; Terminal is also optional.

#Compound components

let checkbox = Checkbox::new(self.checked);
checkbox
    .root()
    .flex_row()
    .gap(8.0)
    .on_click(toggle)
    .child(checkbox.indicator_with(div().size(16.0, 16.0)))
    .child(text("Remember this device"))

Keep parts under the root they belong to so focus and values stay connected.

#Controlled state

Store values on the view, pass them into constructors, and update them from listeners. Then call cx.invalidate(). The view owns the state.

#Component families

The component reference covers forms, overlays, menus, tables, trees, and more. examples/base_ui_components.rs is a gallery.

#Styling parts

Apply fluent style methods on each visible part. Parts ship unstyled so colors and layout belong to your app. Types such as TabsState and SelectState expose the current state for custom presentation.