DxButton.ChildContent Property

Specifies Button content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment<RenderFragment>	Content markup.

Remarks

The ChildContent component parameter can store custom component content that does not belong to other component’s RenderFragment properties as shown below:

<DxButton RenderStyle="ButtonRenderStyle.Info"
          Click="@Like"
          IconCssClass="btn-icon-like"
          Text="Like">
    <ChildContent>
            @context
            <span class="ms-1">@likes</span>
    <ChildContent>
</DxButton>
@* ... *@
@code {
    int likes;

    void Like(MouseEventArgs args) {
        likes++;
    }
    protected override void OnInitialized() {
        likes = 1;
    }
}

In this example, the Button renders custom content (like counter) next to the default content specified in the button’s properties (text and icon). Use the @context parameter to specify where the default content should be rendered.

You can omit the <ChildContent> tag and specify the markup directly in the <DxButton> tag:

    <DxButton RenderStyle="ButtonRenderStyle.Info"
              Click="@Like"
              IconCssClass="btn-icon-like"
              @* ... *@
              Text="Like">
        @context
        <span class="ms-1">@likes</span>
    </DxButton>
    @* ... *@
@code {
    int likes;

    void Like(MouseEventArgs args) {
        likes++;
    }
    protected override void OnInitialized() {
        likes = 1;
    }
}

Run Demo: Button — Custom Content