DxDrawer.MiniPanelWidth Property

Specifies the width of the minimized drawer panel.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string MiniPanelWidth { get; set; }

Property Value

Type	Description
String	The width, in CSS units.

Remarks

When the MiniModeEnabled property is set to true, the DxDrawer component displays a minimized panel when the full-size panel is closed. The panel changes its width instead of closing.

Run Demo: Drawer Mini View

Use the MiniPanelWidth property to specify the width of the minimized panel.

<DxDrawer @bind-IsOpen="IsOpen" 
          MiniModeEnabled="true"
          MiniCssClass="demo-drawer-mini"
          MiniPanelWidth="50px">
    <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>

Important

If you set the MiniPanelWidth property to auto, fit-content, min-content, or max-content, drawer animation is disabled because of the transition CSS property limitations.