@dariustanhai/vue-toggle NPM

toggle

VueJS lightweight toggle component

Check out the live DEMO

Installation

$ npm install --save @dariustanhai/vue-toggle

Usage

<template>
  <toggle
    class="toggle"
    left="YES"
    right="NO"
    identifier="toggle"
    :startRight="condition"
    @propagate="setToggle">
  />
</template>

<script>

export default {
  data() {
    return {
      condition: false
    }
  },
  components: {
    toggle: () => import('@dariustanhai/vue-toggle') 
  },
  methods: {
    setToggle () {
      this.condition = !this.condition
    }
  }
}
  
</script>

<style lang="scss">

.toggle {
  margin: 50px auto;
  border: solid black 1px;
  border-radius: 5px;
  @include dimension (240px, 40px);
  .active {
    background-color: red;
  }
  h6 {
    font-family: 'Arial';
  }
}
  
</style>

Props

Prop	Type(s)	Description
left	String	Label for left toggle
right	String	Label for right toggle
identifier	String	Unique ID for multiple toggles
startRight	Boolean	Change default start location to right toggle