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.
npm install vue-onoff-toggle --saveor with yarn,
yarn add vue-onoff-toggleIn your main.js file:
import Vue from 'vue' import OnoffToggle from 'vue-onoff-toggle' Vue.use(OnoffToggle)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' ] }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" />| 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. |
- Chrome: 40+
- Firefox: 25+
- IE: 11+