# Switch

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

Global usage

Vue.component(Switch.name, Switch)
1

For local usage

export default {
  components: {
    [Switch.name]: Switch
  }
}
1
2
3
4
5

# Simple switch

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

<script>
  export default {
    data () {
        return {
           switches: {
             defaultOn: true,
             defaultOff: false
           }
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# With text

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

<script>
  export default {
    data () {
        return {
           switches: {
             defaultOn: true,
             defaultOff: false
           }
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Slots

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

<script>
  export default {
    data () {
        return {
           switches: {
             defaultOn: true
           }
        }
      }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Switch Props

# Events

Event Name Description Parameters
input triggers when the binding value changes the updated value

# Slots

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

← Tables →