Toggle Vue Component

Toggle Vue component represents Toggle component.

Toggle Components

There are following components included:

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
tooltipstringtooltip text to show on hover/press
tooltip-triggerstringhoverDefines how to trigger (open) Tooltip. Can be hover, click or manual

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

Toggle v-model

Toggle Vue component supports v-model on checked property:

<template>
  <f7-page>
    <f7-toggle v-model:checked="jobIsDone" />
    <p>Job is done: {{ jobIsDone }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        jobIsDone: false,
      };
    }
  };
</script>

Examples

toggle.vue
<template>
  <f7-page>
    <f7-navbar title="Toggle"></f7-navbar>
    <f7-block-title>Super Heroes</f7-block-title>
    <f7-list simple-list strong outline-ios dividers-ios>
      <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>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7BlockTitle, f7List, f7ListItem, f7Toggle } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7List,
    f7ListItem,
    f7Toggle,
  },
};
</script>