DxFlyout.SizeMode Property

Specifies the size of the component and its content.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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

Property Value

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.

Remarks

The SizeMode property allows you to apply different size modes to the DxFlyout 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 DxFlyout component.

razor

<div id="flyout-overview-target-container">
    <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="() => IsOpen = !IsOpen" aria-describedby="flyout-overview">
        SHOW A FLYOUT
    </DxButton>
</div>
<DxFlyout
    @bind-IsOpen=IsOpen
    Id="flyout-overview"
    RenderStyle="@ButtonRenderStyle.Secondary"
    PositionTarget="#flyout-overview-target-container"
    RestrictionTarget="#Navigation-Flyout-Overview"
    FitToRestriction=false
    CloseMode="FlyoutCloseMode.Close"
    HeaderVisible="true"
    HeaderText="Header"
    BodyText="@Constants.Content"
    Width="300px"
    PreventCloseOnPositionTargetClick="true"
    SizeMode="SizeMode.Large">
</DxFlyout>

@code {
    bool IsOpen { get; set; } = false;
}

Run Demo: Flyout - Overview