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.0+ toggle / switch button - simple, pretty, customizable.
Feel free to ask questions or propose features in the "Issues" section
Install:
npm install vue-js-toggle-button --saveImport:
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)Use:
<toggle-button @change="onChangeEventHandler"/>
<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 |
| 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'} |
| 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 |
Events
| Name | Description |
|---|---|
| change | Triggered whenever state of the component changes. Contains: value - state of the object srcEvent - source click event |