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: 1 day 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 (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-30T14:48:45.000Z (almost 4 years ago)
• Last Synced: 2024-09-01T06:38:48.315Z (about 1 month 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+