DxRibbonTab Class

Defines a tab in the DxRibbon component.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

public class DxRibbonTab :
    ComponentBase,
    INestedSettingsOwner,
    IDisposable

Remarks

The DxRibbonTab class implements the functionality of an individual tab displayed in the DxRibbon component. Use the Text property to specify the text displayed in the tab.

Populate the tab’s child content with DxRibbonGroup elements to add item groups to the tab.

Run Demo

<DxRibbon>
    <DxRibbonApplicationTab Text="File">...</DxRibbonApplicationTab>
    <DxRibbonTab Text="Home">
        <DxRibbonGroup>
            <DxRibbonItem Text="Undo" IconCssClass="rb-icon rb-icon-undo" SplitDropDownButton="true">
                <DxRibbonItem Text="Redo" />
            </DxRibbonItem>
            <DxRibbonItem Text="Paste" IconCssClass="rb-icon rb-icon-paste" SplitDropDownButton="true">
                <DxRibbonItem Text="Copy" />
                <DxRibbonItem Text="Cut" />
            </DxRibbonItem>
            <DxRibbonItem Text="Highlight text" IconCssClass="rb-icon rb-icon-paint" />
        </DxRibbonGroup>
        <DxRibbonGroup>
            <DxRibbonComboBoxItem Data="Fonts" @bind-Value="CurrentFont" TextFieldName="@nameof(FontInfo.Name)" Width="120px" />
            <DxRibbonComboBoxItem Data="FontSizes" @bind-Value="CurrentFontSize" TextFieldName="@nameof(FontSizeInfo.Size)" Width="75px" />
        </DxRibbonGroup>
    ...
</DxRibbon>

Ribbon Groups

Contextual Tabs

Contextual tabs appear under certain conditions, such as when a user selects an image or a table. The DxRibbon component highlights contextual tabs and displays them after standard tabs.

Set the tab’s Contextual property to true to mark that the tab is contextual. Use the Visible property to manage the tab visibility.

<DxRibbon>
    <DxRibbonTab Text="Picture Format" Contextual="true" Visible="@PictureFormatVisible">...</DxRibbonTab>
    <DxRibbonTab Text="Table Design" Contextual="true" Visible="@TableDesignVisible">...</DxRibbonTab>
    <DxRibbonTab Text="Table Layout" Contextual="true" Visible="@TableLayoutVisible">...</DxRibbonTab>
    <DxRibbonTab Text="Home">...</DxRibbonTab>
    <DxRibbonTab Text="Insert">...</DxRibbonTab>
    ...
</DxRibbon>

<img src="/images/picture.png" @onfocus="@pictureHasFocus" @onblur="@pictureLostFocus" width="50px" tabindex="0" />
<img src="/images/table.png" @onfocus="@tableHasFocus" @onblur="tableLostFocus" width="50px" tabindex="0" />

@code {
    bool PictureFormatVisible { get; set; } = false;
    bool TableDesignVisible { get; set; } = false;
    bool TableLayoutVisible { get; set; } = false;

    public void pictureHasFocus(FocusEventArgs args) {
        PictureFormatVisible = true;
    }
    public void pictureLostFocus(FocusEventArgs args) {
        PictureFormatVisible = false;
    }
    public void tableHasFocus() {
        TableDesignVisible = true;
        TableLayoutVisible = true;
    }
    public void tableLostFocus(FocusEventArgs args) {
        TableDesignVisible = false;
        TableLayoutVisible = false;
    }
}

Ribbon Contextual Tabs