Enact
Edit on GitHub

ui/ToggleIcon

An unstyled icon component that handles interaction and toggles state between activated and deactivated.

Visually, it may be to be customized by a theme or application to represent any state.

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

Members

ToggleIconComponent

Represents a Boolean state, and can accept any icon to toggle.

import ToggleIcon from '@enact/ui/ToggleIcon';
Properties
onToggle
Function

The handler to run when the component is toggled.

ToggleIconBaseComponent

Represents a Boolean state, and can accept any icon to toggle.

import {ToggleIconBase} from '@enact/ui/ToggleIcon';
Properties
children
StringObject

The icon to use for this component.

See: ui/Icon.Icon.children
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:

  • toggleIcon - The root class name

  • icon - The background node of the button

  • selected - Applied to a selected button

disabled
Boolean

Disables ToggleIcon.

Default: false
iconClasses
String

CSS classes to be used on the Icon component

iconComponent
StringComponent

The component used to render the icon.

Default: 'div'
selected
Boolean

Sets whether this control is in the 'on' or 'off' state. true for 'on', false for 'off'.

Default: false

ToggleIconDecoratorComponent

Adds support for the onToggle prop callback to be fired when the onTap (touch-safe onClick) event executes.

import {ToggleIconDecorator} from '@enact/ui/ToggleIcon';
ArrayBooleanFunctionModuleNumberObjectString