IBarButton Interface

A button on the ribbon/toolbar in the DxRichEdit or DxHtmlEditor.

Namespace: DevExpress.Blazor.Office

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IBarButton :
    IBarItemWithImageBase,
    IBarItem,
    IBarItemBase

Related API Members

The following members return IBarButton objects:

• BarItemCollection.AddCustomButton(Int32, String, Func<Task>)
• BarItemCollection.AddCustomButton(String, Func<Task>)

Remarks

Call AddCustomButton method overloads to create a custom ribbon/toolbar button and add it to an item collection.

Refer to the following event descriptions for additional information and examples:

• DxRichEdit.CustomizeRibbon
• DxRichEdit.CustomizeToolbar
• DxHtmlEditor.CustomizeToolbar

HTML Editor Example

The following code snippet adds a custom button that opens the specified URL in a new tab:

Razor

@inject IJSRuntime JSRuntime

<DxHtmlEditor Height="200px"
              CustomizeToolbar="@OnCustomizeToolbar" />

@code {
    void OnCustomizeToolbar(IToolbar toolbar) {
        // Adds a custom group at the first position in the group collection
        IBarGroup docGroup = toolbar.Groups.AddCustomGroup(0);
        // Adds a custom button to the group
        var myItem = docGroup.Items.AddCustomButton(0, "Blazor Docs", async () => {
            var url = "https://docs.devexpress.com/Blazor/400725/blazor-components";
            await JSRuntime.InvokeVoidAsync("open", url, "_blank");
        });
        // Customizes the button using CSS classes
        myItem.CssClass = "doc-button";
    }
}

CSS

.custom-button {
    color: var(--dxds-color-content-primary-default-rest);
}

Rich Text Editor Example

The following code snippet creates a custom Watermark button and adds it to the File group:

@inject NavigationManager NavigationManager

<DxRichEdit @ref=rich 
            CustomizeToolbar="CustomizeToolbar"
            BarMode="BarMode.Toolbar" />

@code {
    Selection selection;
    DxRichEdit rich;

    void CustomizeToolbar(IToolbar toolbar) {
        BarGroupCollection groups = toolbar.Groups;
        groups.Clear();
        AddFileCommonGroup(groups);
        // ...
    }

    void AddFileCommonGroup(BarGroupCollection groups) {
        IBarGroup fileCommonGroup = groups.Add(RichEditToolbarGroupNames.File);
        // ...

        // Adds a custom button
        IBarButton insertWatermarkButton = fileCommonGroup.Items.AddCustomButton("Watermark", InsertWatermarkAsync);
        insertWatermarkButton.GetEnabled = () => selection.ActiveSubDocument.Type == SubDocumentType.Main;
        insertWatermarkButton.IconUrl = "_content/BlazorDemo/images/Watermark.svg";
        insertWatermarkButton.Tooltip = "Insert Watermark.";
    }    

    async Task InsertWatermarkAsync() {
        rich.DocumentAPI.BeginUpdate();
        Section section = await rich.DocumentAPI.Sections.GetAsync(0);
        try {
            SubDocument header = await section.GetHeaderAsync(createIfNotExist: true);
            Image image = await header.Images.CreateAsync(0, DocumentImageSource.LoadFromUrl(NavigationManager.BaseUri + "_content/BlazorDemo/images/SampleWatermark.png", 5000, 5000));
            await image.ChangePropertiesAsync(ip => {
                ip.HorizontalAnchorElement = FloatingObjectHorizontalAnchorElement.Page;
                ip.VerticalAnchorElement = FloatingObjectVerticalAnchorElement.Page;
                ip.HorizontalAlignment = FloatingObjectHorizontalAlignment.Center;
                ip.VerticalAlignment = FloatingObjectVerticalAlignment.Center;
            });
        }
        finally {
            rich.DocumentAPI.EndUpdate();
        }
    }
}

Run Demo: Toolbar Customization