Enact

moonstone/Popup

Exports the moonstone/Popup.Popup and moonstone/Popup.PopupBase components. The default export is moonstone/Popup.Popup.

import Popup from '@enact/moonstone/Popup';

Members

import Popup from '@enact/moonstone/Popup';
Properties
noAnimation
Boolean

When true, the popup will not animate on/off screen.

Default: false
noAutoDismiss
Boolean

When true, the popup will not close when the user presses ESC key.

Default: false
onClose
Function

A function to be run when a closing action is invoked by the user. These actions include pressing ESC key, clicking on the close button, or spotlight focus moves outside the boundary of the popup (when spotlightRestrict is not 'self-only'). It is the responsibility of the callback to set the open property to false.

onHide
Function

A function to be run when popup hides. When animating it runs after transition for hiding is finished.

onKeyDown
Function

A function to be run when a key-down action is invoked by the user.

onShow
Function

A function to run when popup shows. When animating, it runs after transition for showing is finished.

Note: The function does not run if Popup is initially opened and non animating.

open
Boolean

When true, the popup is rendered. Popups are rendered into the floating layer.

Default: false
scrimType
String

Types of scrim. It can be either 'transparent', 'translucent', or 'none'. 'none' is not compatible with spotlightRestrict of 'self-only', use a transparent scrim to prevent mouse focus when using popup.

Default: 'translucent'
showCloseButton
Boolean

When true, the popup includes a close button; when false, none is included.

Default: false
spotlightRestrict
String

Restricts or prioritizes navigation when focus attempts to leave the popup. It can be either 'none', 'self-first', or 'self-only'.

Default: 'self-only'

PopupBaseComponent

moonstone/Popup.PopupBase is a modal component that appears at the bottom of the screen and takes up the full screen width.

import {PopupBase} from '@enact/moonstone/Popup';
Properties
children
Node

The contents to be displayed in the body of the popup.

containerId
String

Specifies the container id.

Default: null
noAnimation
Boolean

When true, the popup will not animate on/off screen.

Default: false
onCloseButtonClick
Function

A function to be run when either the close button (if present) is clicked

onHide
Function

A function to be run after transition for hiding is finished.

onShow
Function

A function to run after transition for showing is finished.

open
Boolean

When true, the popup is in the open/expanded state with the contents visible

Default: false
showCloseButton
Boolean

When true, the close button is shown; when false, it is hidden.

Default: false
spotlightRestrict
String

Restricts or prioritizes navigation when focus attempts to leave the popup. It can be either 'none', 'self-first', or 'self-only'.

Default: 'self-only'
ArrayBooleanFunctionModuleNumberObjectString