JSPM – vue-js-toggle-button@1.3.0

Package Exports

vue-js-toggle-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-js-toggle-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

If using vue-cli, add the SASS loader:

npm install sass-loader node-sass --save-dev

Import Plugin:

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'}"/>

If you prefer not to use the plugin you can also import the component directly:

import ToggleButton from 'vue-js-toggle-button/src/Button'

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'}`
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'}`
switchColor	[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, default is 50
height	Number	22	Height of the button, default is 22
name	String	undefined	Name to attach to the generated input field

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+

vue-js-toggle-button