enact logoEnact
Edit on GitHub

ui/FloatingLayer

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
floatLayerClassName
String

CSS classes for FloatingLayer.

Default: 'enact-fit enact-clip enact-untouchable'
floatLayerId
String

Element id for floating layer.

Default: 'floatLayer'
noAutoDismiss
Boolean

Prevents FloatingLayer from hiding when the user presses cancel/back (e.g. ESC) key or clicks outside the floating layer.

Default: false
onClose
Function

Called when floating layer is closed.

onDismiss
Function

Called when a closing action is invoked.

These actions may include pressing cancel/back (e.g. ESC) key or programmatically closing by FloatingLayerDecorator. When cancel key is pressed, the function will only invoke if noAutoDismiss is set to false.

When pressing ESC key, event payload carries detail property containing inputType value of 'key'. When clicking outside the boundary of the popup, event payload carries detail property containing inputType value of 'click'.

onOpen
Function

Called when floating layer is opened. It will only be invoked for the first render.

open
Boolean

Renders the floating layer and its components.

Default: false
scrimType
String

The 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
floatLayerId
String

Element Id of the floatLayer

Default: 'floatLayer'
wrappedClassName
String

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: ''
ArrayBooleanFunctionModuleNumberObjectString