DxDrawer.Mode Property

Specifies how the drawer panel interacts with the target content area.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(DrawerMode.Shrink)]
[Parameter]
public DrawerMode Mode { get; set; }

Property Value

Type	Default	Description
DrawerMode	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.

Run Demo: Drawer Position and Mode

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.

razor

<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.