Back to Devexpress

DxDrawer.SizeMode Property

blazor-devexpress-dot-blazor-dot-dxdrawer-0c615a20.md

latest2.3 KB
Original Source

DxDrawer.SizeMode Property

Specifies the size of the component and its content.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(null)]
[Parameter]
public SizeMode? SizeMode { get; set; }

Property Value

TypeDefaultDescription
Nullable<SizeMode>null

The size mode. If the property is not specified (the value is null), the size is determined by the SizeMode global option.

|

Available values:

NameDescription
Small

Small size.

| | Medium |

Medium size.

| | Large |

Large size.

|

Remarks

The SizeMode property allows you to apply different size modes to the DxDrawer component and its content. For additional information, refer to the following topic: Size Modes.

The following code snippet applies the Large size mode to the DxDrawer component.

razor
<DxDrawer IsOpen="true" SizeMode="SizeMode.Large">
    <BodyTemplate>
        <DxMenu CssClass="demo-drawer-menu w-100" 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>
        <p>Lorem ipsum dolor sit amet...</p>
    </TargetContent>
</DxDrawer>

See Also

DxDrawer Class

DxDrawer Members

DevExpress.Blazor Namespace