Skip to main content
All docs
V25.1
  • DxRibbonTab.Contextual Property

    Specifies if the current tab is contextual.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public bool Contextual { get; set; }

    Property Value

    Type Description
    Boolean

    true if the tab is contextual; false if the tab is not contextual.

    Remarks

    Set the Contextual property to true to mark that the tab is contextual. The DxRibbon component highlights contextual tabs and displays them after standard tabs.

    Contextual tabs should appear under certain conditions, such as when a user selects an image or a table. 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

    See Also