ui/ToggleItem

Unstyled toggle item components and behaviors.

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/ui/ToggleItem';

Members

ToggleItemComponent

An unstyled item with built-in support for toggling.

Example:

<ToggleItem icon="lock" iconPosition="before">Toggle Me</ToggleItem>
import ToggleItem from '@enact/ui/ToggleItem';

ToggleItemBaseComponent

A minimally styled toggle item without any behavior, ripe for extension.

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

The main content of the toggle item.

component
Function

The type of component to use to render as root element.

This receives the css prop for theme extension and therefore must be a custom component and not a simple HTML DOM node. Recommended component or themed derivative: SlotItem

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.

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

disabled
Boolean

Applies a disabled visual state to the toggle item.

Default: false
icon
StringObject

An optional prop that lets you override the icon of the iconComponent component.

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

iconPosition
String

Specifies on which side ('before' or 'after') of the text the icon appears.

Default: 'before'
onTap
Function

Called when the toggle item is toggled. Developers should generally use onToggle instead.

onToggle
Function

Called when the toggle item is toggled.

selected
Boolean

Applies the provided icon.

Default: false
value
Any

The value that will be sent to the onToggle handler.

Default: null

ToggleItemDecoratorHigher-Order Component

Adds interactive functionality to ToggleItemBase.

import {ToggleItemDecorator} from '@enact/ui/ToggleItem';
ArrayBooleanFunctionModuleNumberObjectString