enact logoEnact
Edit on GitHub

moonstone/MoonstoneDecorator

Exports the MoonstoneDecorator HOC

import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';

Members

MoonstoneDecoratorHigher-Order Component

A higher-order component that applies Moonstone theming to an application.

It also applies floating layer, resolution independence, skin support, spotlight, and internationalization support. It is meant to be applied to the root element of an app.

Skins provide a way to change the coloration of your app. The currently supported skins for Moonstone are "moonstone" (the default, dark skin) and "moonstone-light". Use the skin property to assign a skin. Ex: <DecoratedApp skin="light" />

Note: This HoC passes className to the wrapped component. It must be passed to the main DOM node.

import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
Configuration
accessible
Boolean

Applies AccessibilityDecorator.

If not applied, app will not support accessibility options.

See: moonstone/MoonstoneDecorator.AccessibilityDecorator
Default: true
disableFullscreen
Boolean

Disables use of full screen.

Default: false
float
Boolean

Enables a floating layer for popup components.

If not applied, app will be responsible for applying the decorator.

See: ui/FloatingLayer.FloatingLayerDecorator
Default: true
i18n
falseObject

Options for I18nDecorator.

May be false to prevent applying the decorator. If not applied, app will be responsible for applying the decorator.

See: i18n/I18nDecorator
Default: {sync: true}
noAutoFocus
Boolean

Disables setting spotlight focus on first render.

Default: false
overlay
Boolean

Enables overlay mode (no background color will be applied).

Default: false
ri
Object

Override the resolution independence settings.

See: ui/resolution
rootId
String

Specifies the id of the React DOM tree root node

Default: 'root'
skin
Boolean

Applies skinning support.

See: moonstone/Skinnable
Default: true
spotlight
Boolean

Applies spotlight decorator.

If not applied, app will be responsible for applying the decorator.

See: spotlight/SpotlightRootDecorator
Default: true

AccessibilityDecoratorHigher-Order Component

A higher-order component that classifies an application with a target set of font sizing rules.

import {AccessibilityDecorator} from '@enact/moonstone/MoonstoneDecorator';
Properties added to wrapped component
highContrast
Boolean

Enables additional features to help users visually differentiate components.

The UI library will be responsible for using this information to adjust the components' contrast to this preset.

Default: false
textSize
'normal''large'

Sets the goal size of the text.

The UI library will be responsible for using this information to adjust the components' text sizes to this preset. Current presets are 'normal' (default), and 'large'.

Default: 'normal'
ArrayBooleanFunctionModuleNumberObjectString