DxDrawer.PanelWidth Property

Specifies the width of the drawer panel.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
String	The width, in CSS units.

Remarks

Use the PanelWidth property to specify the width of the drawer panel.

<DxDrawer @bind-IsOpen="IsOpen" 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>

The default panel width is set in the CSS and equal to 15%.

Important

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