zabrane/vue-toggle-btn

Vue.js Toggle Button - A dynamic, fully customizable toggle button aka toggle switch

vue-toggle-btn

A Highly Customizable, easy-to-use elegant toggle/switch button component

Demo

Usage

Install via NPM npm i vue-toggle-btn

Then require in your project:

var VueToggleBtn = require('vue-toggle-btn');

or ES6 syntax:

import VueToggleBtn from 'vue-toggle-btn';

Then you can register the component globally:

Vue.component('vue-toggle-btn', VueToggleBtn);

Or in your Vue component:

components: {
  ToggleBtn
}

You can then use the following selector anywhere in your project:

• To get up and running quick the package now supports rendering just the selector with default values

<vue-toggle-btn></vue-toggle-btn>

Properties

options is a full configuration object holding the toggle-button building blocks which are handle, track and isActive

property	Type	Description
options	object	holds all toggle button style configurations
isActive	false	holds the current boolean state of the button - can be false or true
handle	object	holds all handle style configurations
track	object	holds all track style configurations

handle

property	Type	Default	Description
diameter	number	30	Sets the handle diameter (the round button moving)
color	string	#fff	Sets the handle color
borderRadius	string	50%	Sets the handle border radius

track

property	Type	Default	Description
width	number	70	Sets the track width
height	number	30	Sets the track height
color	string	#ccc	Sets the default track color
activeColor	string	#2196F3	Sets the active status track color(after toggled)
borderWidth	number	0	Sets the track border width
borderRadius	string	34px	Sets the track border radius

events

Event Name	Returns	Description
setIsActive	isActive	Clicking the toggle button emits an its current isActive boolean state

Listening to the event e.g:

<vue-toggle-btn @isActive="myLocalSetterFunction($event)"></vue-toggle-btn>

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

---

👨‍💻 Follow me on Twitter.

Donation

If this project helped you reduce development time, you can buy me a cup of coffee :)

• Paypal - [email protected]