moonstone/ToggleItem

A Moonstone-themed Item used as the basis for other stylized toggle item components.

Note: This is not intended to be used directly, but should be extended by a component that will customize this component's appearance by supplying an iconComponent prop.

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

Members

ToggleItemComponent

A Moonstone-styled item with built-in support for toggling, marqueed text, and Spotlight focus.

This is not intended to be used directly, but should be extended by a component that will customize this component's appearance by supplying an iconComponent prop.

import ToggleItem from '@enact/moonstone/ToggleItem';
Properties
iconComponent
ComponentElement

The Icon to render in this item.

This component receives the selected prop and value, and must therefore respond to it in some way. It is recommended to use ToggleIcon for this.

Default: null

ToggleItemBaseComponent

A Moonstone-styled toggle Item without any behavior.

import {ToggleItemBase} from '@enact/moonstone/ToggleItem';
Properties
children
Node

The content to be displayed as the main content of the toggle item.

iconComponent
ComponentElement

The icon component to render in this item.

This component receives the selected prop and value, and must therefore respond to it in some way. It is recommended to use ToggleIcon for this.

Default: null
css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal Elements and states of this component.

The following classes are supported:

  • toggleItem - The root class name

icon
String

Overrides the icon of the iconComponent component.

This accepts any string that the Icon component supports, provided the recommendations of iconComponent are followed.

ToggleItemDecoratorHigher-Order Component

Adds interactive functionality to ToggleItemBase.

import {ToggleItemDecorator} from '@enact/moonstone/ToggleItem';
Configuration
invalidateProps
Array

Invalidate the distance of marquee text if any property (like 'inline') changes. Expects an array of props which on change trigger invalidateMetrics.

Default: ['inline']
ArrayBooleanFunctionModuleNumberObjectString