Switch

live example

Explore the API in the live example.

api reference

Switch(name[, parent])

The toggle switch control widget. Inherits all API from the [Widget] ../components/widget.html component. The switch is constrained to a rectangle defined by the width/height and the margins. By default the switch is positioned on the top left corner of its bounding box and can be adjusted by the margins. The label is bounded by the inner width (widget width minus the side margins).

Parameters

Name	Type	Description
name	string	Name of the widget. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

Switch.callback(callback)

Binds a callback to the switch.

Parameters

Name	Type	Description
callback	Function	Function to call when the switch is toggled. The switch status is passed to the method as parameter.

Returns

Switch

Reference to the Switch API.

Examples

// Bind method to switch.
const switchBtn = dalian.Switch('my-control')
  .callback(console.log)
  .render()

// Remove callback.
switchBtn.callback()
  .render()

Switch.color([color])

Sets the switch color.

Parameters

Name	Type	Description
color	string	optionalColor to set. Default value is `grey`.

Returns

Switch

Reference to the Switch API.

Examples

// Set color.
const switchBtn = dalian.Checkbox('my-control')
  .color('yellowgreen')
  .render()

// Reset color.
switchBtn.color()
  .render()

Switch.disable([on])

Disables/enables the switch. If disabled, the switch cannot be interacted with.

Parameters

Name	Type	Description
on	boolean	optionalWhether to disable the switch or not. Default value is `false`.

Returns

Switch

Reference to the Switch API.

Examples

// Disable switch.
const switchBtn = dalian.Switch('my-control')
  .disable(true)
  .render()

// Enable switch.
switchBtn.disable()
  .render()

Switch.label([text])

Sets the switch label.

Parameters

Name	Type	Description
text	string	optionalLabel text. Default value is `''`.

Returns

Switch

Reference to the Switch API.

Examples

// Set switch label.
const switchBtn = dalian.Switch('my-control')
  .label('Check me!')
  .render()

// Reset label.
switchBtn.label()
  .render()

Switch.toggle(on)

Toggles the switch.

Parameters

Name	Type	Description
on	boolean	Whether to toggle the switch on or off.

Returns

Switch

Reference to the Switch API.

Examples

// Set the switch on.
const switchBtn = dalian.Switch('my-control')
  .toggle(true)
  .render()

// Uncheck the box.
switchBtn.toggle(false)
  .render()