DxDrawer.Mode Property
Specifies how the drawer panel interacts with the target content area.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.2.dll
NuGet Package: DevExpress.Blazor
#Declaration
[DefaultValue(DrawerMode.Shrink)]
[Parameter]
public DrawerMode Mode { get; set; }
#Property Value
Type | Default | Description |
---|---|---|
Drawer |
Shrink | The interaction mode. |
Available values:
Name | Description | Image |
---|---|---|
Overlap | The drawer panel overlaps the target content area. |
|
Shrink | The drawer panel shrinks the target content area. |
#Remarks
Use the Mode
property to define how the drawer interacts with the target content area in the opened state: overlaps or shrinks the content.
The following modes are available.
#Overlap Mode
The drawer overlaps and greys out target content. You can use the ApplyBackgroundShading property to disable background shading.
<DxDrawer IsOpen="IsOpen" Mode="DrawerMode.Overlap" 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>
#Shrink Mode
The default mode. The drawer shrinks target content.