Toggle Vue Component

Toggle Vue component represents Toggle component.

Toggle Components

There are following components included:

  • f7-toggle

Toggle Properties

PropTypeDefaultDescription
<f7-toggle> properties
initbooleantrueInitializes Toggle
namestringToggle input name
valuestring
number
Toggle input value
checkedbooleanfalseDefines whether the toggle input is checked or not
disabledbooleanfalseDefines whether the toggle input is disabled or not
readonlybooleanfalseDefines whether the toggle input is readonly or not

Toggle Events

EventDescription
<f7-toggle> events
changeEvent will be triggered when toggle checkbox state changed. This event may not occur on touch devices, so it is better to use next toggle:change event instead
toggle:changeEvent will be triggered when toggle checkbox state changed

Toggle Methods

<f7-toggle> methods
.toggle()Toggle checkbox state

Examples

<f7-block-title>Super Heroes</f7-block-title>
<f7-list simple-list>
  <f7-list-item>
    <span>Batman</span>
    <f7-toggle checked></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Aquaman</span>
    <f7-toggle checked color="blue"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Superman</span>
    <f7-toggle checked color="red"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Hulk</span>
    <f7-toggle color="green"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Spiderman (Disabled)</span>
    <f7-toggle disabled></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Ironman (Disabled)</span>
    <f7-toggle checked disabled></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Thor</span>
    <f7-toggle checked color="orange"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Wonder Woman</span>
    <f7-toggle color="pink"></f7-toggle>
  </f7-list-item>
</f7-list>