Accessible Toggle Switch Component For Vue.js - Toggles

Install & Download:

# NPM
$ npm install vue-toggles --save

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',
},