Creates the <cq-toggle>
web component.
UI Helper that binds a toggle to an object member or to callback functions when toggled.
Attributes
cq-member
— Object member to observe. If not provided, then callbacks are used exclusively.cq-multichart-distribute
— Option for multichart context. Distributes object member change to all charts.cq-action
— Action to take. Default is "class".cq-value
— Value for the action (i.e., class name). Default is "active".cq-toggles
— A comma-separated list of values which are toggled through with each click. The list can include "null". Stringified booleans and "null" are converted to their primitive values. All other values are passed to the Number constructor. If the result is a number (not NaN), the number is used. Otherwise the value is left as a string.cq-toggle-classes
— A comma-separated list of classes associated with the toggle setting. If a setting requires multiple classes, they need to be separated with spaces.
Use registerCallback to receive a callback every time the toggle changes. When a callback is registered, any automatic class changes are bypassed.
- Since:
-
2015
Example
document.querySelector("cq-toggle").registerCallback(function (value) {
console.log("current value is " + value);
if (value != false) this.node.addClass("active");
});
Methods
-
registerCallback(fc, immediate)
-
Adds a callback function to the toggle.
Parameters:
Name Type Description fc
function The callback function to add to the toggle. The function accepts the current value of the toggle as a parameter. The value of
this
within the callback function is the toggle component.immediate
boolean A flag that indicates whether to immediately call the callback function after it has been registered with the toggle.
- Since:
-
2015