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