Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/euvl/vue-js-toggle-button
:fish_cake: Vue.js 2 toggle / switch button - simple, pretty, customizable
https://github.com/euvl/vue-js-toggle-button
button javascript switch toggle-buttons toggle-switches vue vue-component vue-plugin vuejs
Last synced: 7 days ago
JSON representation
:fish_cake: Vue.js 2 toggle / switch button - simple, pretty, customizable
- Host: GitHub
- URL: https://github.com/euvl/vue-js-toggle-button
- Owner: euvl
- License: mit
- Created: 2017-03-20T10:34:34.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T09:59:54.000Z (about 2 years ago)
- Last Synced: 2025-01-11T08:00:39.987Z (14 days ago)
- Topics: button, javascript, switch, toggle-buttons, toggle-switches, vue, vue-component, vue-plugin, vuejs
- Language: Vue
- Homepage: http://vue-js-toggle-button.yev.io/
- Size: 814 KB
- Stars: 936
- Watchers: 11
- Forks: 133
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vue.js toggle/switch button.
[Live demo here](http://vue-js-toggle-button.yev.io/)
### Install
```bash
npm install vue-js-toggle-button --save
```
### Import
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)
```
### Use
```xml
```
### 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:
```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)
```
### Browser compatibility
* Chrome: 40+
* Firefox: 25+
* Safari: 10+
* IE: 11+