FlyoutPosition Enum

Lists values used to position a flyout window.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

[Flags]
public enum FlyoutPosition

Members

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.

See Also

DevExpress.Blazor Namespace