Switch

To use the switch component, first import it: 
import {BaseSwitch} from 'src/components'

Global usage

Vue.component(BaseSwitch.name, BaseSwitch)

For local usage

export default {
  components: {
    BaseSwitch
  }
}

Simple switch

<template>
  <div>
    <base-switch v-model="switches.defaultOn"></base-switch>
    <base-switch v-model="switches.defaultOff"></base-switch>
  </div>
</template>

<script>
  export default {
    data () {
        return {
           switches: {
             defaultOn: true,
             defaultOff: false
           }
        }
      }
  }
</script>

With text

ON OFF
ON OFF 

<template>
  <div>
    <base-switch v-model="switches.defaultOn" on-text="ON" off-text="OFF"></base-switch>
    <base-switch v-model="switches.defaultOff" on-text="ON" off-text="OFF"></base-switch>
  </div>
</template>

<script>
  export default {
    data () {
        return {
           switches: {
             defaultOn: true,
             defaultOff: false
           }
        }
      }
  }
</script>

Slots

<template>
  <div>
  <base-switch v-model="switches.defaultOn">
    <i class="fa fa-check" slot="on"></i>
    <i class="fa fa-exclamation" style="color:#fff;" slot="off"></i>
  </base-switch>
  </div>
</template>

<script>
  export default {
    data () {
        return {
           switches: {
             defaultOn: true
           }
        }
      }
  }
</script>

Switch Props

Switch events

Name Description Params
input triggers when the binding value changes the updated value

Switch Slots

Slot Description
on Content to be displayed on switch when switch is on
off Content to be displayed on switch when switch is off

← Tags input →