DxRibbonTab.Contextual Property

Specifies if the current tab is contextual.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.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;
    }
}