Toggle Vue Component

Toggle Vue component represents Toggle component.

Toggle Components

There are following components included:

f7-toggle

Toggle Properties

Prop	Type	Default	Description
<f7-toggle> properties
init	boolean	true	Initializes Toggle
name	string		Toggle input name
value	string number		Toggle input value
checked	boolean	false	Defines whether the toggle input is checked or not
disabled	boolean	false	Defines whether the toggle input is disabled or not
readonly	boolean	false	Defines whether the toggle input is readonly or not
tooltip	string		tooltip text to show on hover/press
tooltip-trigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover`, `click` or `manual`

Toggle Events

Event	Description
<f7-toggle> events
change	Event 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:change	Event 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>

Improve this Doc

On this page

Toggle Components
Toggle Properties
Toggle Events
Toggle Methods
Toggle v-model
Examples