Namespace: cq-toggle

WebComponents. cq-toggle

Creates the <cq-toggle> web component. UI Helper that binds a toggle to an object member or to callback functions when toggled.

cq-member — Object member to observe. If not provided then callbacks are used exclusively. cq-action — Action to take. Default="class". cq-value — Value for action (i.e., class name). Default="active". cq-toggles — A comma-separated list of valid values which are toggled through with each click. List may include "null". cq-toggle-classes — A comma-separated list of classes associated with toggle setting. If a setting is requiring multiple classes they need to be separated with spaces Values will turn stringified booleans into into boolean values and try to cast numbers with Number, any number that equals NaN will remain a string.

Use registerCallback to receive a callback every time the toggle changes. When a callback is registered, any automatic class changes are bypassed.

  • 2015


document.querySelector("cq-toggle").registerCallback(function (value) {
	console.log("current value is " + value);
	if (value != false) this.node.addClass("active");