DxDrawer.IsOpen Property
Specifies whether the drawer panel is open.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[Parameter]
public bool IsOpen { get; set; }
#Property Value
Type | Description |
---|---|
Boolean |
|
#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.
<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;
}
}