DxRibbonApplicationTabItem.Click Event

Fires when a user clicks the application tab’s item.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(null)]
[Parameter]
public EventCallback<RibbonApplicationTabItemClickEventArgs> Click { get; set; }

Event Data

The Click event's data class is RibbonApplicationTabItemClickEventArgs. The following properties provide information specific to this event:

Property	Description
Element	Returns information about a clicked Ribbon element. Inherited from RibbonElementClickEventArgs.
Item	Returns information about the clicked application tab item.
MouseEventArgs	The Blazor’s built-in MouseEventArgs event arguments. Inherited from RibbonElementClickEventArgs.

Remarks

Handle the Click event to perform custom actions when a user clicks the application tab’s item.

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

If you prefer to handle all clicks on application tab’s items in one place, use the ApplicationTabItemClick event.