moonstone/ Toggle Button
Exports the moonstone/ToggleButton.ToggleButton component.
import ToggleButton from '@enact/moonstone/ToggleButton';
Members
ToggleButtonComponent
moonstone/ToggleButton.ToggleButton is a Button that is Toggleable.
By default, ToggleButton
maintains the state of its selected
property. Supply the
defaultSelected
property to control its initial value. If you wish to directly control updates
to the component, supply a value to selected
at creation time and update it in response to
onToggle
events.
import ToggleButton from '@enact/moonstone/ToggleButton';
ToggleButtonBaseComponent
moonstone/ToggleButton.ToggleButtonBase is a stateless Button
that can be toggled by changing its selected
property
import {ToggleButtonBase} from '@enact/moonstone/ToggleButton';
Properties
- backgroundOpacity
The background-color opacity of this button; valid values are
'opaque'
,'translucent'
, and'transparent'
.Default: 'opaque'- children
The string to be displayed as the main content of the toggle button. If
toggleOffLabel
and/ortoggleOnLabel
are provided, they will be used for the respective states.- disabled
When
true
, the {@glossary button} is shown as disabled and does not generateonClick
{@glossary event}.Default: false- minWidth
A boolean parameter affecting the minimum width of the button. When
true
, the minimum width will be set to 180px (or 130px ifsmall
istrue
). Iffalse
, the minimum width will be set to the current value of@moon-button-height
(thus forcing the button to be no smaller than a circle with diameter@moon-button-height
).Default: true- pressed
When
true
a pressed visual effect is applied to the button- selected
Boolean indicating whether toggle button is currently in the 'on' state.
Default: false- small
A boolean parameter affecting the size of the button. If
true
, the button's diameter will be set to 60px. However, the button's tap target will still have a diameter of 78px, with an invisible DOM element wrapping the small button to provide the larger tap zone.Default: false- toggleOffLabel
Button text displayed in the 'off' state. If not specified,
children
will be used for 'off' button text.Default: ''- toggleOnLabel
Button text displayed in the 'on' state. If not specified,
children
will be used for 'on' button text.Default: ''