Vue.js toggle/switch button.

Name: euvl/vue-js-toggle-button
Brand: euvl/vue-js-toggle-button
SKU: project/euvl/vue-js-toggle-button
Rating: 4.75 (911 reviews)

Live demo here

Install

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

Import

Import plugin:

import ToggleButton from 'vue-js-toggle-button'

Vue.use(ToggleButton)

Import component:

import { ToggleButton } from 'vue-js-toggle-button'

Vue.component('ToggleButton', 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/unchecked or disabled Example: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}`
css-colors	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'}`
switch-color	[String, Object]	`#BFCBD9`	If `String` - color or background property of the switch when checked If `Object` - colors or background property for the switch when checked/uncheked Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`
width	Number	50	Width of the button
height	Number	22	Height of the button
margin	Number	3	Space between the switch and background border
name	String	undefined	Name to attach to the generated input field
font-size	Number	undefined	Font size

Events

Name	Description
change	Triggered whenever state of the component changes. Contains: `value` - state of the object `srcEvent` - source click event
input	Input event for v-model

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'

Vue.use(Button)

Browser compatibility

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

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Betterjoy	3,208			2 months ago			492	other	C#
Allows the Nintendo Switch Pro Controller, Joycons and SNES controller to be used with CEMU, Citra, Dolphin, Yuzu and as generic XInput
Vuecirclemenu	1,170	5	3	7 years ago	7	January 25, 2017	18	mit	CSS
:rabbit:A beautiful circle menu powered by Vue.js
Aiflatswitch	921	16		2 years ago	11	August 06, 2019		mit	Swift
Nicely animated flat design switch alternative to UISwitch
Vue Js Toggle Button	911	175	40	9 months ago	22	October 26, 2019	51	mit	Vue
:fish_cake: Vue.js 2 toggle / switch button - simple, pretty, customizable
Shinywidgets	765	58	113	a day ago	30	May 11, 2022	88	gpl-3.0	R
shinyWidgets : Extend widgets available in shiny
Unswitch	577	1	1	5 years ago	5	August 09, 2018		mit	JavaScript
🕹 A tiny event handler for Switch controllers!
Android Toggle Switch	451			4 years ago			1	mit	Java
A customizable extension to Android switches that supports many items.
Easybutton	381			3 months ago			20	mit	C++
Arduino library for debouncing momentary contact switches, detect press, release, long press and sequences with event definitions and callbacks.
Jc_button	359			2 years ago			1	gpl-3.0	C++
Arduino library to debounce button switches, detect presses, releases, and long presses
Switch Fightstick	293			4 years ago				other	C
Proof-of-Concept LUFA Project for the Nintendo Switch. Uses reverse-engineering of the Pokken Tournament Pro Pad for the Wii U and Switch System v3.0.0

Vue Js Toggle Button