https://github.com/devwiz1028/vue-onoff-toggle
Vue.js 2 OnOff Toggle - simple, lightweight, customizable
https://github.com/devwiz1028/vue-onoff-toggle
checkbox checkbox-component css-animations ios javascript material onoffswitch toggle-switch vue vue2
Last synced: 3 months ago
JSON representation
Vue.js 2 OnOff Toggle - simple, lightweight, customizable
- Host: GitHub
- URL: https://github.com/devwiz1028/vue-onoff-toggle
- Owner: devwiz1028
- License: mit
- Created: 2020-10-19T18:42:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-30T14:48:45.000Z (over 4 years ago)
- Last Synced: 2025-04-23T23:48:10.624Z (3 months ago)
- Topics: checkbox, checkbox-component, css-animations, ios, javascript, material, onoffswitch, toggle-switch, vue, vue2
- Language: JavaScript
- Homepage:
- Size: 165 KB
- Stars: 14
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue OnOff Toggle
A simple, lightweight on/off toggle component made with Vue.js. Provides multiple themes with default configurations. You can also customize size, color and borders.
[Live Demo](https://codepen.io/devwiz1028/pen/XWjZjZm)
## Installation
```bash
npm install vue-onoff-toggle --save
```
or with `yarn`,
```bash
yarn add vue-onoff-toggle
```
## Import in Vue.js
In your `main.js` file:
```javascript
import Vue from 'vue'
import OnoffToggle from 'vue-onoff-toggle'
Vue.use(OnoffToggle)
```
## Import in Nuxt.js
Create a new plugin in `plugins/vue-onoff-toggle.js`:
```javascript
import Vue from 'vue'
import OnoffToggle from 'vue-onoff-toggle'
Vue.use(OnoffToggle)
```
Add this new plugin to `nuxt.config.js`
```javascript
module.exports = {
// ...
plugins: [
// ...
'~plugins/vue-onoff-toggle'
]
}
```
## How to use
After importing the library, use `onoff-toggle` tag inside your vue template:
```html
```
## Props
Prop
Description
theme
Theme to use. "default", "ios" and "material" are available.
name
Name to attach to checkbox input. Useful when the toggle is used inside a form.
disabled
Toggle is disabled
onColor
Background color of checked toggle
offColor
Background color of unchecked toggle
thumbColor
Background color of the thumb. For "material" theme, if you don't specify onColor, it will be thumbColor with opacity 0.5 by default
borderColor
Color of the thumb's border. Only available for "ios" theme.
width
Width of the toggle
height
Height of the toggle
margin
Space around the thumb
shadow
Only works on default theme. When set to true, a glow effect will be added around the toggle.
## Browser Compatibility
* Chrome: 40+
* Firefox: 25+
* IE: 11+