Templated Components

Templated components allow you to create flexible, reusable components that can render custom content provided by the parent component.

Basic Template

@typeparam TItem

<div class="list-container">
    @foreach (var item in Items)
    {
        @ItemTemplate(item)
    }
</div>

@code {
    [Parameter]
    public IEnumerable<TItem> Items { get; set; }

    [Parameter]
    public RenderFragment<TItem> ItemTemplate { get; set; }
}

Using Templates

<ListComponent Items="@people">
    <ItemTemplate Context="person">
        <div class="person-card">
            <h3>@person.Name</h3>
            <p>@person.Email</p>
        </div>
    </ItemTemplate>
</ListComponent>

Multiple Templates

@typeparam TItem

<div class="container">
    @HeaderTemplate
    @foreach (var item in Items)
    {
        @ItemTemplate(item)
    }
    @FooterTemplate
</div>

@code {
    [Parameter]
    public IEnumerable<TItem> Items { get; set; }

    [Parameter]
    public RenderFragment HeaderTemplate { get; set; }

    [Parameter]
    public RenderFragment<TItem> ItemTemplate { get; set; }

    [Parameter]
    public RenderFragment FooterTemplate { get; set; }
}