A Lightweight on/off toggle Component Made with Vue.js

A Lightweight on/off toggle Component Made with Vue.js

  • 61

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