Accessible Toggle Switch Component For Vue.js – Toggles

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:

Accessible Toggle Switch Component For Vue.js - Toggles

Changelog:

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

You Might Be Interested In:

Tags:

Add Comment