moonstone/ Toggle Item
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
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
The content to be displayed as the main content of the toggle item.
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.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
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
Invalidate the distance of marquee text if any property (like 'inline') changes. Expects an array of props which on change trigger invalidateMetrics.
Default: ['inline']