Skip to content

Vue.js 2 OnOff Toggle - simple, lightweight, customizable

License

Notifications You must be signed in to change notification settings

devwiz1028/vue-onoff-toggle

Repository files navigation

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

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+