-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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 |
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
Event | Description |
---|---|
<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>