Skip to main content
All docs
V25.1
  • DxEditorButton.ChildContent Property

    Specifies an editor button’s content.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.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.

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

    Command Button - Child Content

    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>
    
    See Also