RenderFragment is a Blazor delegate type representing Razor content that a component can receive and render. A component commonly exposes it through a [Parameter] property, then places the property in its markup. section 34.3
RenderFragment supports several component-composition patterns:
- A ChildContent property receives the HTML placed between a component’s opening and closing tags. section 34.3
- Multiple RenderFragment properties create named template regions such as Header and Body, letting the component own structure while callers supply details. section 34.3.1
- RenderFragment<RouteData> carries route data to the found-content section of Router, while an ordinary RenderFragment supplies not-found content. section 35.2
- LayoutComponentBase exposes a Body RenderFragment for rendering the selected component inside shared layout markup. section 35.2.5
Wrapping child content
A ThemeWrapper component declares [Parameter] public RenderFragment? ChildContent { get; set; } and renders @ChildContent inside a themed div. Callers place a SelectFilter and button between the ThemeWrapper tags; Blazor assigns that markup to ChildContent automatically. section 34.3
Listing 34.17 The contents of the TableTemplate.razor file in the Blazor folder
<table class="table table-sm table-bordered table-striped">
@if (Header != null) {
<thead>@Header</thead>
}
<tbody>@Body</tbody>
</table>
@code {
[Parameter]
public RenderFragment? Header { get; set; }
[Parameter]
public RenderFragment? Body { get; set; }
}
The TableTemplate listing shows the complete pattern: optional Header and required Body fragments are declared as parameters, conditionally rendered, and supplied through matching Header and Body elements. section 34.3.1
