Skip to content

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

Notifications You must be signed in to change notification settings

JonathanDn/vue-toggle-btn

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-toggle-btn

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

MIT License view on npm

Demo

toggle-btn

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 :)

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages