DxRibbonApplicationTabItem Class

Defines an item displayed in the ribbon application menu.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxRibbonApplicationTabItem :
    DxRibbonElementBase,
    IRibbonApplicationTabItem,
    IRibbonElement,
    IRibbonNode,
    IRibbonIconSource,
    IRibbonClickableItem<RibbonApplicationTabItemClickEventArgs>,
    IRibbonInteractiveElement

Remarks

The DxRibbonApplicationTabItem class implements the functionality of an individual item in the menu displayed under the application tab. Populate the tab’s child content to define the menu item collection.

Razor
CSS

razor

<DxRibbon>
    <DxRibbonApplicationTab Text="File">
        <DxRibbonApplicationTabItem Text="New" 
                                    IconCssClass="rb-icon rb-icon-document-blank" 
                                    Click="@(() => ClickItem("New tab item"))" />
        <DxRibbonApplicationTabItem Text="Open" 
                                    IconCssClass="rb-icon rb-icon-folder-open" 
                                    Click="@(() => ClickItem("Open tab item"))" />
        <DxRibbonApplicationTabItem Text="Save as" 
                                    IconCssClass="rb-icon rb-icon-save" 
                                    Click="@(() => ClickItem("Save as tab item"))">
            <DxRibbonApplicationTabItem Text="Text file" 
                                        Click="@(() => ClickItem("Text file tab item"))"/>
            <DxRibbonApplicationTabItem Text="Word document" 
                                        Click="@(() => ClickItem("Word document tab item"))"/>
            <DxRibbonApplicationTabItem Text="Pdf file" 
                                        Click="@(() => ClickItem("Pdf file tab item"))"/>
        </DxRibbonApplicationTabItem>
        <DxRibbonApplicationTabItem Text="Share" 
                                    IconCssClass="rb-icon rb-icon-share" 
                                    Click="@(() => ClickItem("Share tab item"))" />
        <DxRibbonApplicationTabItem Text="Print" 
                                    IconCssClass="rb-icon rb-icon-print" 
                                    Click="@(() => ClickItem("Print tab item"))" />
    </DxRibbonApplicationTab>
    <DxRibbonTab Text="Home">...</DxRibbonTab>
    <DxRibbonTab Text="Insert">...</DxRibbonTab>
</DxRibbon>

css

.rb-icon {
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}
.rb-icon-document-blank {
    -webkit-mask-image: url("../images/icons/ribbon/berry/document-blank.svg");
    mask-image: url("../images/icons/ribbon/berry/document-blank.svg");
}
.rb-icon-folder-open {
    -webkit-mask-image: url("../images/icons/ribbon/berry/folder-open.svg");
    mask-image: url("../images/icons/ribbon/berry/folder-open.svg");
}
.rb-icon-save {
    -webkit-mask-image: url("../images/icons/ribbon/berry/save.svg");
    mask-image: url("../images/icons/ribbon/berry/save.svg");
}
.rb-icon-print {
    -webkit-mask-image: url("../images/icons/ribbon/berry/print.svg");
    mask-image: url("../images/icons/ribbon/berry/print.svg");
}
.rb-icon-share {
    -webkit-mask-image: url("../images/icons/ribbon/berry/share.svg");
    mask-image: url("../images/icons/ribbon/berry/share.svg");
}

Run Demo

Implements

IRibbonApplicationTabItem

Inheritance

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