Slots

Slots project child content into component templates — default and named slots via the slot attribute.

Default slot

#[component]
fn Panel() -> View {
    view! {
        <section class="panel">
            <Slot />
        </section>
    }
}

// Usage:
view! {
    <Panel>
        <p>"Child content lands in the default slot."</p>
    </Panel>
}

Named slots

#[component]
fn Card() -> View {
    view! {
        <article class="card">
            <header><Slot name="header" /></header>
            <div class="body"><Slot /></div>
            <footer><Slot name="footer" /></footer>
        </article>
    }
}

view! {
    <Card>
        <h2 slot="header">"Title"</h2>
        <p>"Body paragraph."</p>
        <a slot="footer" href="/more">"Read more"</a>
    </Card>
}

Layouts

Flow layouts use <Slot /> to wrap page content. See Layouts for nested layout chains.