blazor-devexpress-dot-blazor-dot-dxdrawer-0c615a20.md
Specifies the size of the component and its content.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(null)]
[Parameter]
public SizeMode? SizeMode { get; set; }
| Type | Default | Description |
|---|---|---|
| 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:
| Name | Description |
|---|---|
| Small |
Small size.
| | Medium |
Medium size.
| | Large |
Large size.
|
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.
<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