DxRibbonTab Class

Defines a tab in the DxRibbon component.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxRibbonTab :
    DxRibbonElementBase,
    IRibbonTab,
    IRibbonTabBase<RibbonTabClickEventArgs>,
    IRibbonElement,
    IRibbonNode,
    IRibbonIconSource,
    IRibbonClickableItem<RibbonTabClickEventArgs>,
    IRibbonInteractiveElement

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.

Run Demo

razor

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

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 DevExpress.Blazor.DxRibbonElementBase.Visible property to manage the tab visibility.

razor

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




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

Implements

Inheritance

Object ComponentBase DevExpress.Blazor.Ribbon.Internal.DxRibbonNodeBase DxRibbonElementBase DxRibbonTab