enact logoEnact
Edit on GitHub

moonstone/Popup

Modal component that appears at the bottom of the screen and takes up the full screen width.

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

Members

PopupComponent

A stateful component that renders a popup in a FloatingLayer.

import Popup from '@enact/moonstone/Popup';
Properties
closeButtonAriaLabel
String

Hint string read when focusing the popup close button.

Default: 'Close'
noAnimation
Boolean

Disables transition animation.

Default: false
noAutoDismiss
Boolean

Indicates that the popup will not trigger onClose when the user presses the cancel/back (e.g. ESC) key or taps outside of the popup.

Default: false
onClose
Function

Called on:

  • pressing ESC key,

  • clicking on the close button, or

  • moving spotlight focus outside the boundary of the popup when spotlightRestrict is 'self-first'.

It is the responsibility of the callback to set the open property to false.

onHide
Function

Called after hide transition has completed, and immediately with no transition.

onKeyDown
Function

Called when a key is pressed.

onShow
Function

Called after show transition has completed, and immediately with no transition.

Note: The function does not run if Popup is initially opened and noAnimation is true.

open
Boolean

Controls the visibility of the Popup.

By default, the Popup and its contents are not rendered until open.

Default: false
scrimType
String

Scrim type.

  • Values: '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

Shows a close button.

Default: false
spotlightRestrict
String

Restricts or prioritizes navigation when focus attempts to leave the popup.

  • Values: 'self-first', or 'self-only'.

Note: If onClose is not set, then this has no effect on 5-way navigation. If the popup has no spottable children, 5-way navigation will cause the Popup to fire onClose.

Default: 'self-only'

PopupBaseComponent

The base popup component.

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

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

closeButtonAriaLabel
String

Sets the hint string read when focusing the popup close button.

Default: 'Close'
noAnimation
Boolean

Disables transition animation.

Default: false
onCloseButtonClick
Function

Called when the close button is clicked.

onHide
Function

Called after the popup's "hide" transition finishes.

onShow
Function

Called after the popup's "show" transition finishes.

open
Boolean

Controls the visibility of the Popup.

By default, the Popup and its contents are not rendered until open.

Default: false
showCloseButton
Boolean

Shows the close button.

Default: false
spotlightId
String

The container id for spotlight/Spotlight.

Default: null
spotlightRestrict
String

Restricts or prioritizes navigation when focus attempts to leave the popup.

It can be either 'none', 'self-first', or 'self-only'.

Note: The ready-to-use Popup component only supports 'self-first' and 'self-only'.

Default: 'self-only'
ArrayBooleanFunctionModuleNumberObjectString