Skip to content

🍥 Vue.js 2 toggle / switch button - simple, pretty, customizable

License

Notifications You must be signed in to change notification settings

ImpossivelPT/vue-js-toggle-button

 
 

Repository files navigation

npm version npm

Vue.js 2 toggle / switch button - simple, pretty, customizable.

Imgur

Feel free to ask questions or propose features in the "Issues" section

Live demo here

Install:

npm install vue-js-toggle-button --save

Import:

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)

Use:

<toggle-button @change="onChangeEventHandler"/>

<toggle-button v-model="myDataVariable"/>

<toggle-button :value="false" 
               color="#82C7EB" 
               :sync="true" 
               :labels="true"/>

<toggle-button :value="true" 
               :labels="{checked: 'Foo', unchecked: 'Bar'}"/>

Properties

Name Type Default Description
value Boolean false Initial state of the toggle button
sync Boolean false If set to true, will be watching changes in value property and overwrite the current state of the button whenever value prop. changes
speed Number 300 Transition time for the animation
disabled Boolean false Button does not react on mouse events
color [String, Object] #75C791 If String - color of the button when checked
If Object - colors for the button when checked/uncheked
Example: {checked: '#00FF00', unchecked: '#FF0000'}
cssColors Boolean false If true - deactivates the setting of colors through inline styles in favor of using CSS styling
labels [Boolean, Object] false If Boolean - shows/hides default labels ("on" and "off")
If Object - sets custom labels for both states.
Example: {checked: 'Foo', unchecked: 'Bar'}
width Number 50 Width of the button, default is 50
height Number 22 Height of the button, default is 22

labels object accepts HTML text (for example, you can use FontAwesome for checked/unchecked states).

Events

Name Description
change Triggered whenever state of the component changes.
Contains:
value - state of the object
srcEvent - source click event

SSR

Include plugin in your nuxt.config.js file:

module.exports = {
  plugins: ['~plugins/vue-js-toggle-button']
}

And your plugins/vue-js-toggle-button.js will look like:

import Vue from 'vue'
import Button from 'vue-js-toggle-button/dist/ssr.index'

Vue.use(Button)

Browser compatibility

  • Chrome: 40+
  • Firefox: 25+
  • Safari: 10+
  • IE: 11+

Font size

To change font size please use basic css:

.vue-js-switch#changed-font {
  font-size: 16px;
}
<toggle-button id="changed-font/>

About

🍥 Vue.js 2 toggle / switch button - simple, pretty, customizable

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 77.9%
  • JavaScript 22.1%