ToggleSwitch plugin

Version 2.1.0

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-”.

This is initially off

This is initially on

This is a dangerous setting

HTML <input> element

Disable HTML input elements

Hide HTML input elements

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.

let state = F("#switch").toggleSwitch.state; F("#switch").toggleSwitch.state = true;