Overview

The Popup Element provides functionality to automatically invoke an overlay layer onto a user interface.

Among the options available to fine-tune its feature-set, the Popup includes a custom positioning system, automatic transition animations, and the ability to restrict input within the Popup until it is closed.

Usage Guide

🌟 Strengths:	• Automatic display and concealment of the Element and its children via the built-in `Open` Property. • Position can be bound to the coordinates of specific Elements, or relative to the mouse.
📝 Considerations:	• Popups display at a higher level of depth relative to the rest of the interface. As such, any Elements placed within the Page, will always display below an open Popup. • Cannot be Templated, instead serves as a 'host' for other Elements whose visibility and behavior it manages. • The Popup Element can only have one child. However, if the child Element is capable of hosting multiple children itself, it can be used as a host for deeper hierarchies.
📌 Typical Use Cases:	• Modals. • Notifications. • Pause Menus and other miscellaneous screen overlays.

Setting Up A Popup

A Popup can be added to any Page by clicking-and-dragging it from the 📘 Add Element Panel into any compatible Element on the 📘 Stage or in the 📘 Navigator Panel.

The Popup has no content or dimension itself, and instead is defined by the content placed inside of it. A Popup can be populated by intoducing Elements into it from the 📘 Add Element Panel.

Opening And Closing Popups

Each Popup contains an Open Property, which serves as a toggle for the display of the Popup and its children:

In addition, the StaysOpen Property allows a Popup to be function in two different ways when open:

True	The end user can interact with Elements under the Popup. Any input made outside of the bounds of the Popup does not automatically close the PopUp.
False	The end-user's input is restricted to within the bounds of the Popup. Any input made outside of the bounds of is not registered below the Popup. Instead this out-of-bounds input closes the Popup.

Customizing Popup Position

The Popup comes built-in with a range of tools that allow customization of the Popup's location on-screen:

Placement	Sets the Popups position relative to the chosen target in the `Placement Target` Property. Alternately, allows the Popup to be positioned at the position of the Mouse Cursor at the moment the Popup is set to 'Open'.
Horizontal Offset Vertical Offset	Sets the Popup to render from a horizontal and/or vertical pixel distance away from the position defined for it in the `Placement` Property.
Placement Target	Sets which Element a Popup should position itself relative to when it opens. When not defined, the Popup will position relative to nearest parent, which in certain cases, could be the Page itself.
Placement Rectangle	Allows a custom rectangle to be defined, for the Popup to use to position itself relative to.

Built-In Animations

The Popup Element comes included with a small collection of built-in animation presets that define how the Popup and its content are revealed on-Stage when the Popup's Open Property is set to True:

Allows Transparency	Sets whether or not to use the Popup reveal transition defined in the `Animation` Property.
Animation	Allows the selection of a preset Popup reveal animation style.