DxDrawer.IsOpen Property

Specifies whether the drawer panel is open.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
Boolean	true if the drawer is open; otherwise, false.

Remarks

Implement two-way binding for the IsOpen property to open and close the drawer panel in code and update the property value when the drawer panel closes in response to a user click on a content area. The IsOpenChanged event occurs when the property value changes.

Run Demo: Drawer Overview

<DxToolbar ItemClick="OnToolbarItemClick">
    <Items>
        <DxToolbarItem IconCssClass="tb-icon icon-hamburger" Name="Navigation" Text="Navigation" />
    </Items>
</DxToolbar>

<DxDrawer IsOpen="IsNavigationOpen" PanelWidth="20%">
    <BodyTemplate>
        <DxMenu Orientation="Orientation.Vertical">
            <Items>
                <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon" />
                <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon" />
                <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon" />
                <DxMenuItem Text="Contacts" IconCssClass="menu-icon-contacts menu-icon" />
                <DxMenuItem Text="About" IconCssClass="menu-icon-about menu-icon" />
            </Items>
        </DxMenu>
    </BodyTemplate>
    <TargetContent>
        @* Lorem ipsum dolor sit amet, consectetur adipiscing elit ... *@
    </TargetContent>
</DxDrawer>

@code {
    bool IsNavigationOpen { get; set; } = true;
    void OnToolbarItemClick(ToolbarItemClickEventArgs args) {
        if(args.ItemName == "Navigation")
            IsNavigationOpen = !IsNavigationOpen;
    }
}