ui/ Floating Layer
FloatingLayer provides a way to render a component into a node outside of its parent component.
This is used for modal components such as popups.
import FloatingLayer from '@enact/ui/FloatingLayer';
Members
FloatingLayerComponent
FloatingLayer that mixes ui/Cancelable.Cancelable to handle FloatingLayer dismissal.
This is used for modal components such as popups.
import FloatingLayer from '@enact/ui/FloatingLayer';
FloatingLayerBaseComponent
A component that creates an entry point to the new render tree.
This is used for modal components such as popups.
import {FloatingLayerBase} from '@enact/ui/FloatingLayer';
Properties
CSS classes for FloatingLayer.
Default: 'enact-fit enact-clip enact-untouchable'Element id for floating layer.
Default: 'floatLayer'Prevents FloatingLayer from hiding when the user presses
ESC
key.Default: falseCalled when floating layer is closed.
Called when a closing action is invoked.
These actions may include pressing cancel/back (e.g.
ESC
) key or programmatically closing byFloatingLayerDecorator
. When cancel key is pressed, the function will only invoke ifnoAutoDismiss
is set tofalse
.Called when floating layer is opened. It will only be invoked for the first render.
Renders the floating layer and its components.
Default: falseThe scrim type that overlays FloatingLayer.
It can be either
'transparent'
,'translucent'
, or'none'
.Default: 'translucent'
FloatingLayerDecoratorHigher-Order Component
A higher-order component that adds a FloatingLayer adjacent to the wrapped component.
Any classes passed to the FloatingLayerDecorator will be applied to a wrapper surrounding the
wrapped component and the floating layer. If specified in the config, wrappedClassName
will be
passed as className
to the wrapped component.
import {FloatingLayerDecorator} from '@enact/ui/FloatingLayer';
Configuration
Element Id of the floatLayer
Default: 'floatLayer'Class name to be applied to wrapped component.
It can be used when you want to only apply certain styles to the wrapped component and not to the float layer.
Default: ''