Switch

To use the switch component, first import it: ```js import {BaseSwitch} from 'src/components' ``` Global usage ```js 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>
Show Code

With text

ON OFF
ON OFF 
</desc>
<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>
Show Code

Slots

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

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

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 →