Building Real-Life Applications with Blazor WebAssembly/

...

/

RenderFragment Parameters

RenderFragment Parameters

Learn how to pass UI content from parent components to dialog components.

We'll cover the following...

A RenderFragment parameter is a segment of UI content. A RenderFragment parameter is used to communicate UI content from the parent to the child. The UI content can include plain text, HTML markup, Razor markup, or another component.

The following code is for the Alert component. The UI content of the Alert component is displayed when the value of its Show property is true:

Press + to interact
@if (Show)
{
  <div class="dialog-container">
    <div class="dialog">
      <div>
        @ChildContent
      </div>
      <div>
        <button @onclick="OnOk">
          OK
        </button>
      </div>
    </div>
  </div>
}
@code {
  [Parameter] public bool Show { get; set; }
  [Parameter] public EventCallback OnOk { get; set; }
  [Parameter] public RenderFragment? ChildContent { get; set; }
}

The preceding code, for the Alert component, includes three different types of parameters: Boolean, RenderFragment, and ...