DxEditorButton.ChildContent Property

Specifies an editor button’s 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 parameter allows you to specify custom content for an editor’s command button.

The code below adds a command button to a DxTextBox component. This 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.

<DxTextBox Text="Your text">
    <Buttons>
        <DxEditorButton 
              Click="@Like"
              IconCssClass="btn-icon-like"
              Text="Like">
            <ChildContent>
                @*Default content: *@
                @context
                @*Custom content: *@
                <span class="ms-1">@likes</span>
            <ChildContent>
      </DxEditorButton>
    </Buttons>
</DxTextBox>

@code {
    int likes;

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

<style>
    .btn-icon-like {
        height: 16px;
        width: 16px;
        -webkit-mask-image: url("images/icons/like.svg");
        mask-image: url("images/icons/like.svg");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: currentColor;
    }
</style>

Note that you can omit the <ChildContent> tag and specify the markup directly in the <DxEditorButton> tag:

<DxTextBox Text="Your text">
    <Buttons>
        <DxEditorButton 
              Click="@Like"
              IconCssClass="btn-icon-like"
              Text="Like">
                  @context
                  <span class="ms-1">@likes</span>
      </DxEditorButton>
    </Buttons>
</DxTextBox>