sandstone/ Popup
Modal component that appears at the bottom of the screen and takes up the full screen width.
import Popup from '@enact/sandstone/Popup';
Members
PopupComponent
A stateful component that renders a popup in a FloatingLayer.
import Popup from '@enact/sandstone/Popup';
Properties
Hint string read when focusing the popup close button.
Default: 'Close'Disables transition animation.
Default: falseIndicates that the popup will not trigger
onClose
on the ESC key press.Default: falseCalled 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 tofalse
.Called after hide transition has completed, and immediately with no transition.
Called when a key is pressed.
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
.Controls the visibility of the Popup.
By default, the Popup and its contents are not rendered until
open
.Default: falsePosition of the Popup on the screen.
Default: 'bottom'Scrim type.
Values:
'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'Restricts or prioritizes navigation when focus attempts to leave the popup.
Values:
'self-first'
, or'self-only'
.
When using
self-first
, attempts to leave the popup via 5-way will fireonClose
based on the following values ofposition
:'bottom'
- When leaving via 5-way up'top'
- When leaving via 5-way down'left'
- When leaving via 5-way right'right'
- When leaving via 5-way left'center'
- When leaving via any 5-way direction
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 fireonClose
.Default: 'self-only'
PopupBaseComponent
The base popup component.
import {PopupBase} from '@enact/sandstone/Popup';
Properties
The contents to be displayed in the body of the popup.
Set the priority with which screen reader should treat updates to live regions for the Popup.
Disables transition animation.
Default: falseCalled after the popup's "hide" transition finishes.
Called after the popup's "show" transition finishes.
Controls the visibility of the Popup.
By default, the Popup and its contents are not rendered until
open
.Default: falsePosition of the Popup on the screen.
Default: 'bottom'The ARIA role for the Popup.
The container id for spotlight/Spotlight.
Default: nullRestricts 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'