DxRibbonTab.Visible Property

Specifies the tab’s visibility.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
Boolean	true to display the tab; otherwise, false.

Remarks

Use the Visible property to show or hide the tab in the Ribbon.

The following code sample uses the Visible property to manage the visibility of contextual tabs.

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