Switch

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

Global usage

Vue.component(Switch.name, Switch)

For local usage

export default {
  components: {
    [Switch.name]: Switch
  }
}

Simple switch

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

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

With text

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

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

Slots

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

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

Disabled switch

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

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

Switch Props

Events

Event NameDescriptionParameters
inputtriggers when the binding value changesthe updated value

Slots

NameDescription
onContent to be displayed on switch when switch is on
offContent to be displayed on switch when switch is off

← Tables →