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 Usage

import FloatingLayer from '@enact/ui/FloatingLayer';

Members

FloatingLayer   Component

FloatingLayer that mixes ui/Cancelableui/Cancelable.Cancelable to handle FloatingLayer dismissal.

This is used for modal components such as popups.

Import Usage

import FloatingLayer from '@enact/ui/FloatingLayer';

Extends: ui/FloatingLayerui/FloatingLayer.FloatingLayerBase
Wrapped with: ui/Cancelableui/Cancelable.Cancelable

FloatingLayerBase   Component

A component that creates an entry point to the new render tree.

This is used for modal components such as popups.

Import Usage

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'

FloatingLayerDecorator   Higher-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 Usage

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