Built in Components

Built-in Components

Nestix core includes a small set of structural components. It does not include platform widgets such as buttons, labels, views, or inputs.

Fragment

Fragment renders a child Layout without adding its own host node.

layout! {
    Fragment {
        Text("A")
        Text("B")
    }
}

Props:

#[props(debug)]
#[derive(Debug)]
pub struct FragmentProps {
    pub children: Layout,
}

Fragment reconciles children whenever the layout changes:

• removed children are unmounted;
• existing children are reused;
• moved children receive placement notifications;
• new children are mounted under the fragment element.

Renderer components commonly return a Fragment to render their children after creating a host object.

For

For renders a keyed list. Most users create it through the layout! for syntax rather than directly.

layout! {
    for item in items.clone() where key = |item| item.id {
        Row(.item = item)
    }
}

Behavior:

• existing children are reused by key;
• removed children are unmounted;
• reused child item signals are updated with the latest item value;
• moved children receive placement notifications;
• new children are mounted in list order.

The child factory receives each item as Readonly<Item>.

ContextProvider

ContextProvider<T> provides an Rc<T> value to descendant elements.

use std::rc::Rc;

layout! {
    ContextProvider::<Theme>(theme) {
        AppContent
    }
}

Descendants can read the nearest provided value by type:

#[component]
fn ThemedLabel(_props: &LabelProps, element: &Element) -> Element {
    let theme = element.context::<Theme>();
    layout! { Text(theme.unwrap().label.clone()) }
}

Layout

Layout is not a component, but it is the child container used by built-ins and host components.

It can contain zero, one, or many elements and supports:

• len();
• get(index);
• iter();
• into_elements();
• indexing with layout[index];
• iteration by value or by reference.