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
PopupComponent
moonstone/Popup.Popup is a stateful component that help moonstone/Popup.PopupBase to appear in ui/FloatingLayer.FloatingLayer.
import Popup from '@enact/moonstone/Popup';
Properties
- noAnimation
When
true
, the popup will not animate on/off screen.Default: false- noAutoDismiss
When
true
, the popup will not close when the user pressesESC
key.Default: false- onClose
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 (whenspotlightRestrict
is not'self-only'
). It is the responsibility of the callback to set theopen
property tofalse
.- onHide
A function to be run when popup hides. When animating it runs after transition for hiding is finished.
- onKeyDown
A function to be run when a key-down action is invoked by the user.
- onShow
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
When
true
, the popup is rendered. Popups are rendered into the floating layer.Default: false- scrimType
Types of scrim. It can be either
'transparent'
,'translucent'
, or'none'
.'none'
is not compatible withspotlightRestrict
of'self-only'
, use a transparent scrim to prevent mouse focus when using popup.Default: 'translucent'- showCloseButton
When
true
, the popup includes a close button; whenfalse
, none is included.Default: false- spotlightRestrict
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
The contents to be displayed in the body of the popup.
- containerId
Specifies the container id.
Default: null- noAnimation
When
true
, the popup will not animate on/off screen.Default: false- onCloseButtonClick
A function to be run when either the close button (if present) is clicked
- onHide
A function to be run after transition for hiding is finished.
- onShow
A function to run after transition for showing is finished.
- open
When
true
, the popup is in the open/expanded state with the contents visibleDefault: false- showCloseButton
When
true
, the close button is shown; whenfalse
, it is hidden.Default: false- spotlightRestrict
Restricts or prioritizes navigation when focus attempts to leave the popup. It can be either
'none'
,'self-first'
, or'self-only'
.Default: 'self-only'