Simple Toggle Switch Component For Vue – v-toggle

Description:

A simple, lightweight switch/toggle button component for Vue.js.

Usage:

Import the v-toggle.

import v-toggle from 'v-toggle';

In your template.

<div class="toggles">
  <v-toggle id="v-t-default" v-model="toggleValue" />    
</div>
<div class="toggles">
  <v-toggle v-bind:width="36" v-bind:height="22"
      active-color="peru" inactive-color="red"
              id="v-t-small" v-model="toggleSmall" /> 
</div>
<div class="toggles">
  <v-toggle id="v-t-disabled" disabled="true" 
        v-model="vDisabled" />
</div>
<div class="toggles">
  <v-toggle color-gradient
    active-color="linear-gradient(to left, #b3205f, #7d1642)"
    inactive-color="linear-gradient(to right, #20535e, #348899)"
    id="v-t-gradient" v-model="toggleGradient" />    
</div>

Activate the toggle switches.

new Vue({
  el: '#app',
  data: {
    toggleGradient: true,
    toggleValue: true,
    toggleSmall: true,
    vDisabled: true,
  },
  components: {
    vToggle: window.vToggle.default,
  },
});

Default props.

colorValue: false,
successValue: false,
toggleGradient: false,
toggleSmall: false,
toggleValue: true,

Preview:

vue-toggle

Download Details:

Author: eperedo

Live Demo: https://codepen.io/eperedo/pen/ZaOYRE?editors=1011

Download Link: https://github.com/eperedo/vue-toggle/archive/master.zip

Official Website: https://github.com/eperedo/vue-toggle

Last Update: November 22, 2017

Install:

# Yarn
$ yarn add v-toggle

# NPM
$ npm install v-toggle --save

You Might Be Interested In:

Tags:

Add Comment