ChildContent lets a Blazor component act as a wrapper around markup supplied between its opening and closing tags. The component declares a [Parameter] property of type RenderFragment, then renders that content with @ChildContent. section 34.3 section 34.5
Use the feature by following this pattern:
- Declare a nullable RenderFragment? property named ChildContent and decorate it with [Parameter]. section 34.3
- Place @ChildContent where the supplied markup should appear in the component’s output. section 34.3
- Apply the component with ordinary opening and closing tags; Blazor assigns the enclosed markup to ChildContent automatically. section 34.3
ThemeWrapper
A ThemeWrapper receives Theme and Title parameters, then places @ChildContent inside a styled Bootstrap div. Its caller can wrap a SelectFilter and button without adding configuration for the child markup. ErrorBoundary uses the same tag-based idea with ChildContent for normal output and ErrorContent for failures.
Listing 34.15 The contents of the ThemeWrapper.razor file in the Blazor folder
<div class="p-2 bg-@Theme border text-white">
<h5 class="text-center">@Title</h5>
@ChildContent
</div>
@code {
[Parameter]
public string? Theme { get; set; }
[Parameter]
public string? Title { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
}
Inspect the complete ThemeWrapper implementation, including its styling parameters, RenderFragment property, and @ChildContent expression. section 34.3
