Switch

Demos

Size variants

Available size variants for the ui prop: xs / s / m.

Edit this page on GitHubEdit
<template>
<article>
  <section>
    <veui-switch
      v-model="disabled"
      ui="xs"
    >
      Disabled
    </veui-switch>
  </section>
  <section>
    <veui-switch
      v-model="on"
      :disabled="disabled"
    >
      Medium size
    </veui-switch>
    <veui-switch
      v-model="on"
      :disabled="disabled"
      ui="s"
    >
      Small size
    </veui-switch>
    <veui-switch
      v-model="on"
      :disabled="disabled"
      ui="xs"
    >
      Extra small size
    </veui-switch>
  </section>
</article>
</template>

<script>
import { Switch } from 'veui'

export default {
  components: {
    'veui-switch': Switch
  },
  data () {
    return {
      on: false,
      disabled: false
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
}

.veui-switch {
  margin-right: 30px;
}
</style>

True/false values

Use the true-value and false-value props to customize the v-model value of the checkbox in checked/unchecked state.

Status: On

Edit this page on GitHubEdit
<template>
<article>
  <veui-switch
    v-model="status"
    true-value="ON"
    false-value="OFF"
  >
    Bluetooth
  </veui-switch>
  <p>Status: {{ statusMap[status] }}</p>
</article>
</template>

<script>
import { Switch } from 'veui'

const STATUS_MAP = {
  ON: 'On',
  OFF: 'Off'
}

export default {
  components: {
    'veui-switch': Switch
  },
  data () {
    return {
      status: 'ON',
      statusMap: STATUS_MAP
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
xsExtra small.
sSmall.
mMedium.
checkedbooleanfalse

.sync

Whether the checkbox is on.

true-value*trueThe value for checked state.
false-value*falseThe value for unchecked state.
disabledboolean=falseWhether the switch is disabled.
readonlyboolean=falseWhether the switch is read-only.

Slots

NameDescription
defaultThe label text of the switch. The switch is toggled when the label is clicked. Displays nothing by default.

Events

NameDescription
changeTriggered when user toggles the state of the switch. The callback parameter list is (checked: boolean). checked denotes whether the switch is on.
input

v-model

Triggered when the check state is changed. The callback parameter list is (val: *), with val being the current value of v-model. Unlike the change event, input is triggered even without user interaction.

Additionally, Switch exposes the following native events:

auxclick, click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, select, wheel, keydown, keypress, keyup, focus, blur, focusin, focusout.

The callback parameter is the corresponding native event object for all events above.

Edit this page on GitHubEdit