FlyoutPosition Enum

Lists values used to position a flyout window.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Flags]
public enum FlyoutPosition

Members

Name	Description	Image
Auto	Displays the flyout window at the most suitable position determined by the Flyout component.
TopStart	Displays the flyout window at the top edge of the target element aligned to the left element edge.
Top	Displays the flyout window at the top edge of the target element centered horizontally.
TopEnd	Displays the flyout window at the top edge of the target element aligned to the right element edge.
RightStart	Displays the flyout window at the right edge of the target element aligned to the top element edge.
Right	Displays the flyout window at the right edge of the target element centered vertically.
RightEnd	Displays the flyout window at the right edge of the target element aligned to the bottom element edge.
BottomStart	Displays the flyout window at the bottom edge of the target element aligned to the left element edge.
Bottom	Displays the flyout window at the bottom edge of the target element centered horizontally.
BottomEnd	Displays the flyout window at the bottom edge of the target element aligned to the right element edge.
LeftStart	Displays the flyout window at the left edge of the target element aligned to the top element edge.
Left	Displays the flyout window at the left edge of the target element centered vertically.
LeftEnd	Displays the flyout window at the left edge of the target element aligned to the bottom element edge.

Related API Members

The following properties accept/return FlyoutPosition values:

• DxFlyout.Position

Remarks

You can position a flyout window relative to a target element (PositionTarget) or a Rectangle object (PositionRectangle). Assign a FlyoutPosition enumeration value to the Position property to specify the flyout window’s relative position.

<DxButton Id="show-flyout" Click="() => IsOpen = !IsOpen">Show a flyout window</DxButton>
<DxFlyout @bind-IsOpen="@IsOpen" Width="210"
            BodyText="Lorem ipsum dolor sit amet"
            PositionTarget="#show-flyout"
            Position="FlyoutPosition.BottomStart">
</DxFlyout>

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

The position takes into account the offset specified by the Offset and Distance property values.