Description:
A Vue.js component to create customizable, fully accessible toggle switches in an easy way.
How to use it:
1. Import the component.
import Vue from 'vue'; import VueToggles from 'vue-toggles';
2. Register the component.
Vue.component('VueToggles', VueToggles);
3. Add the <VueToggles />
component to the template.
<VueToggles @click="value = !value" :value="value" />
4. Config the switch with the following props.
value: { type: Boolean, default: false, }, disabled: { type: Boolean, default: false, }, reverse: { type: Boolean, default: false, }, checkedText: { type: String, default: null, }, uncheckedText: { type: String, default: null, }, width: { type: [Number, String], default: 75, }, height: { type: [Number, String], default: 25, }, uncheckedBg: { type: String, default: '#939393', }, checkedBg: { type: String, default: '#5850ec', }, dotColor: { type: String, default: '#fff', }, fontSize: { type: [Number, String], default: '12', }, checkedColor: { type: String, default: '#fff', }, uncheckedColor: { type: String, default: '#fff', }, fontWeight: { type: [Number, String], default: 'normal', },
Preview:
Changelog:
v1.1.0 (08/04/2020)
- SSR support
v1.0.4 (07/20/2020)
- Update
v1.0.3 (07/13/2020)
- Fix some css issues
v1.0.2 (06/28/2020)
- Update
Download Details:
Author: juliandreas
Live Demo: https://vue-toggles.netlify.app/
Download Link: https://github.com/juliandreas/vue-toggles/archive/master.zip
Official Website: https://github.com/juliandreas/vue-toggles
Install & Download:
# NPM
$ npm install vue-toggles --save