switch

A switch UI for checkbox.

Showcase at http://yuehu.github.io/switch/.

Installation

Install with component(1):

$ component install yuehu/switch

API

var switcher = new Switch()

.label(on, off)

Text for on/off label. Define in Chinese:

switcher.label('开', '关')

.change(value)

Accept true and false. Change switcher to true or false.

.toggle()

Toggle on/off the swither.

.takeover(element)

The element should be a <input type="checkbox">. It will hide the given element, and when swither is on the checkbox will be checked.

.value()

Get or set value.

Events

When switcher value changes, it will emit a change event.

swither.on('change', function(value) {
  // value is true or false
})

Additional Note

You can change the button size by changing the font size of the label.

.switch {
  font-size: 14px;
}

License

MIT