A Lightweight on/off toggle Component Made with Vue.js
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.
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.
Installation
npm install vue-onoff-toggle --save
or with yarn,
yarn add vue-onoff-toggle
Import in Vue.js
In your main.js file:
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:
import Vue from 'vue'
import OnoffToggle from 'vue-onoff-toggle'
Vue.use(OnoffToggle)
Add this new plugin to nuxt.config.js
module.exports = {
// ...
plugins: [
// ...
'~plugins/vue-onoff-toggle'
]
}
How to use
After importing the library, use onoff-toggle tag inside your vue template:
<onoff-toggle v-model="checked" />
<onoff-toggle v-model="checked" theme="ios" />
<onoff-toggle v-model="checked" theme="material" />
<onoff-toggle
v-model="checked"
onColor="#008F13"
:shadow="false"
/>
<onoff-toggle
v-model="checked"
theme="ios"
onColor="#008F13"
/>
<onoff-toggle
v-model="checked"
theme="material"
thumbColor="#008F13"
/>
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+
Download Details:
Author: devwiz1028
Source Code: https://github.com/devwiz1028/vue-onoff-toggle
Suggest:
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue.js Tutorial: Zero to Sixty