Skip to main content
All docs
V25.1
  • DxDrawer.MiniPanelWidth Property

    Specifies the width of the minimized drawer panel.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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.

    See Also