ToggleSwitch plugin
Frontfire UI provides a toggle switch that has the same function as a checkbox but the appearance of a slider button. It is now commonly known from mobile device UIs.
This plugin is only available in the Complete bundle.
Description
Call the toggleSwitch()
plugin method on an element to make it a toggle switch.
The colours of the switch can be customised with the CSS variables that start with “--toggle-switch-”.
HTML <input> element
A regular HTML <input type="checkbox">
element can be used for the toggle switch.
All such elements that have the toggle-switch
CSS class are transformed automatically.
It is then replaced by a toggle switch that represents the checkbox checked state.
The toggle switch can be enabled and disabled by setting the disabled
property of the HTML <input>
element by any means (through Frontfire or the native DOM API).
Since it was visibly replaced by the new element, that element will follow the disabled state automatically.
The toggle switch can be shown and hidden by setting the Frontfire.visible
property of the HTML <input>
element.
Alternatively, the Frontfire methods show()
, hide()
and toggle()
can be called.
Other ways like manipulating the style.display
property directly will not work.
Since it was visibly replaced by the new element, that element will be shown or hidden instead of the input element.
State control
Custom elements
The toggle state of non-HTML inputs can be controlled with a plugin property.
The state
property gets or sets the current state of the toggle switch.
When the state changes (from user interaction or by calling any of these methods), the change
event is triggered on the element.
State:
HTML input
With HTML <input type="checkbox">
elements, the same as above applies.
Additionally, the element’s checked
property can be changed directly.
In this case, a change
event must be triggered on the input element so that the UI can be updated accordingly because there is no way to automatically detect such a property change.
When the state changes (from user interaction or by calling any of these methods), the change
event is triggered on the HTML <input>
element (not its UI representation).
You generally only interact with the <input>
element here and don’t care about its presentation elements.
State:
Options
The following options are available:
Name | Type | Description | Default |
---|---|---|---|
state |
Boolean | The initial state of the toggle switch. | false |
Plugin properties
This plugin provides properties to access the tabs state.
state
state
→ Boolean
Gets or sets the state of the toggle switch.