ui/ Floating Layer
Exports the ui/FloatingLayer.FloatingLayer component and ui/FloatingLayer.FloatingLayerDecorator Higher-order Component (HOC). The default export is ui/FloatingLayer.FloatingLayer.
import FloatingLayer from '@enact/ui/FloatingLayer';
Members
FloatingLayerComponent
ui/FloatingLayer.FloatingLayer is a component that creates an entry point to the new render tree. This is used for modal components such as popups.
import FloatingLayer from '@enact/ui/FloatingLayer';
FloatingLayerBaseComponent
ui/FloatingLayer.FloatingLayerBase is 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
- floatLayerClassName
CSS classes for FloatingLayer.
Default: 'enact-fit enact-clip enact-untouchable'- floatLayerId
Element id for floating layer.
Default: 'floatLayer'- noAutoDismiss
When
true
, FloatingLayer will not hide when the user pressesESC
key.Default: false- onClose
A function to be run when floating layer is closed.
- onDismiss
A function to be run when
ESC
key is pressed. The function will only invoke ifnoAutoDismiss
is set tofalse
.- onOpen
A function to be run when floating layer is opened. It will only be invoked for the first render.
- open
When
true
, the floating layer and its components will be rendered.Default: false- scrimType
The scrim type. It can be either
'transparent'
,'translucent'
, or'none'
.Default: 'translucent'
FloatingLayerDecoratorHigher-Order Component
Higher-order Component that adds a FloatingLayer adjacent to wrapped component.
import {FloatingLayerDecorator} from '@enact/ui/FloatingLayer';
Configuration
- floatLayerId
Element Id of the floatLayer
Default: 'floatLayer'- wrappedClassName
Classname 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: ''