# 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

Prop Name Type Default Description
value Array | Boolean N/A
onText String N/A
offText String N/A

# 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 →