Nice Toggle Button For Vue.js

Simple, pretty, customizable on/off toggle switch component for Vue.js.

How to use it:

1. Import and register the toggle button component.

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)

// OR
import { ToggleButton } from 'vue-js-toggle-button'
Vue.component('ToggleButton', ToggleButton)

2. Add the ToggleButton component to the app.

<toggle-button />

3. Available props.

value: {
  type: Boolean,
  default: false
},
name: {
  type: String
},
disabled: {
  type: Boolean,
  default: false
},
tag: {
  type: String
},
sync: {
  type: Boolean,
  default: false
},
speed: {
  type: Number,
  default: 300
},
color: {
  type: [String, Object],
  validator(value) {
    return (
      isString(value) ||
      has(value, 'checked') ||
      has(value, 'unchecked') ||
      has(value, 'disabled')
    )
  }
},
switchColor: {
  type: [String, Object],
  validator(value) {
    return (
      isString(value) || has(value, 'checked') || has(value, 'unchecked')
    )
  }
},
cssColors: {
  type: Boolean,
  default: false
},
labels: {
  type: [Boolean, Object],
  default: false,
  validator(value) {
    return typeof value === 'object'
      ? value.checked || value.unchecked
      : typeof value === 'boolean'
  }
},
height: {
  type: Number,
  default: 22
},
width: {
  type: Number,
  default: 50
},
margin: {
  type: Number,
  default: 3
},
fontSize: {
  type: Number
}

4. Events.

• @change(value, srcEvent)
• @input

Preview:

Changelog:

v1.3.2 (10/27/2019)

• Added prettier, fixed a11y

Download Details:

Author: euvl

Live Demo: http://vue-js-toggle-button.yev.io/

Download Link: https://github.com/euvl/vue-js-toggle-button/archive/master.zip

Official Website: https://github.com/euvl/vue-js-toggle-button

Install & Download:

npm install vue-js-toggle-button --save