Class PopupModel

Represents the configuration model for popup components, containing positioning and collision handling settings.

Inheritance

System.Object

PopupModel

Namespace: Syncfusion.Blazor.Popups

Assembly: Syncfusion.Blazor.dll

Syntax

public class PopupModel : Object

Remarks

The PopupModel class provides comprehensive configuration options for popup positioning, including collision detection, target element relationships, and offset values. This model is typically used to define how popups should behave relative to their target elements and containers.

Examples

Creating and configuring a PopupModel.

var popupModel = new PopupModel
{
    TargetType = TargetType.Relative,
    OffsetX = 10,
    OffsetY = 5,
    Position = new PositionDataModel { X = "left", Y = "top" },
    Collision = new CollisionAxis { X = CollisionType.Flip, Y = CollisionType.Fit }
};

Constructors

PopupModel()

Declaration

public PopupModel()

Properties

Collision

Gets or sets the collision handler settings for the popup component.

Declaration

public CollisionAxis Collision { get; set; }

Property Value

Type	Description
CollisionAxis	A CollisionAxis object that defines collision handling behavior for both X and Y axes, or null if no collision handling is specified.

Remarks

The collision settings determine how the popup should behave when it would be positioned outside the viewport boundaries. You can specify different collision handling strategies for horizontal (X) and vertical (Y) directions.

OffsetX

Gets or sets the horizontal offset value for the popup element positioning.

Declaration

public int OffsetX { get; set; }

Property Value

Type	Description
System.Int32	An int value representing the horizontal offset in pixels. The default value is 0.

Remarks

This property allows fine-tuning of the popup's horizontal position by applying an additional offset to the calculated position. Positive values move the popup to the right, while negative values move it to the left.

OffsetY

Gets or sets the vertical offset value for the popup element positioning.

Declaration

public int OffsetY { get; set; }

Property Value

Type	Description
System.Int32	An int value representing the vertical offset in pixels. The default value is 0.

Remarks

This property allows fine-tuning of the popup's vertical position by applying an additional offset to the calculated position. Positive values move the popup downward, while negative values move it upward.

Position

Gets or sets the position settings for the popup element relative to its target element.

Declaration

public PositionDataModel Position { get; set; }

Property Value

Type	Description
PositionDataModel	A PositionDataModel object that specifies the X and Y positioning values, or null if default positioning is used.

Remarks

The position settings define where the popup should be placed relative to the target element. This includes both horizontal and vertical positioning preferences such as "left", "center", "right" for X-axis and "top", "center", "bottom" for Y-axis.

RelateTo

Gets or sets the element reference for the target element that the popup should be positioned relative to.

Declaration

public ElementReference RelateTo { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.ElementReference	An Microsoft.AspNetCore.Components.ElementReference that represents the target element for popup positioning.

Remarks

This property specifies the DOM element that serves as the reference point for popup positioning. The popup's position will be calculated based on this element's location and dimensions. If not specified, the popup may use a default positioning strategy.

TargetType

Gets or sets the target element type that determines how the popup positioning is calculated.

Declaration

public TargetType TargetType { get; set; }

Property Value

Type	Description
TargetType	A TargetType value that specifies the positioning strategy. The default value is Container.

Remarks

This property determines whether the popup should be positioned relative to a specific element or container. When set to Relative, the popup uses the target element as the reference point. When set to Container, the popup uses the container boundaries for positioning calculations.