DxEditorButton.ChildContent Property

Specifies an editor button’s content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.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 following code snippet 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.

Razor

<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;
    }
}

CSS

.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;
}

Note

Since ChildContent contains nested markup of its parent class, the template content must conform to HTML semantics.

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>