DxDrawer.Mode Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

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