Appearance
Templated Components
Templated components allow you to create flexible, reusable components that can render custom content provided by the parent component.
Basic Template
razor
@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
razor
<ListComponent Items="@people">
<ItemTemplate Context="person">
<div class="person-card">
<h3>@person.Name</h3>
<p>@person.Email</p>
</div>
</ItemTemplate>
</ListComponent>
Multiple Templates
razor
@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; }
}