Vue.js toggle/switch button.

width="140"
alt="Get a coffee"
src="https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png">

Live demo here

$3

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

$3

Import plugin:

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

Vue.use(ToggleButton)
`
OR

Import component:

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

Vue.component('ToggleButton', ToggleButton)
`

$3

`xml


color="#82C7EB"
:sync="true"
:labels="true"/>

:labels="{checked: 'Foo', unchecked: 'Bar'}"/>
`

$3

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

$3

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

$3

Include plugin in your nuxt.config.js file:

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

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

`javascript
import Vue from 'vue'
import Button from 'vue-js-toggle-button'

Vue.use(Button)
``

$3

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