Toggle

Toggle Layout

Layout is pretty simple:

<!-- Toggle element -->
<label class="toggle">
  <!-- Toggle input -->
  <input type="checkbox" />
  <!-- Toggle icon -->
  <span class="toggle-icon"></span>
</label>

Inside of Simple List:

<div class="list simple-list">
  <ul>
    ...
    <li>
      <span>Text label</span>
      <label class="toggle">
        <input type="checkbox" />
        <span class="toggle-icon"></span>
      </label>
    </li>
  </ul>
</div>

Inside of usual List (preferable in item-after):

<div class="list">
  <ul>
    ...
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Text label</div>
        <div class="item-after">
          <label class="toggle">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>

Toggle Colors

Toggle supports all default colors. So to change its color just add color-[color] class to toggle element.

<!-- red toggle -->
<label class="toggle color-red">...</label>

<!-- orange toggle -->
<label class="toggle color-orange">...</label>

Toggle App Methods

Let's look at related App methods to work with Toggle:

app.toggle.create(parameters)- create Toggle instance

parameters - object. Object with toggle parameters

Method returns created Toggle's instance

app.toggle.destroy(el)- destroy Toggle instance

el - HTMLElement or string (with CSS Selector) or object. Toggle element or Toggle instance to destroy.

app.toggle.get(el)- get Toggle instance by HTML element

el - HTMLElement or string (with CSS Selector). Toggle element.

Method returns Toggle's instance

Toggle Parameters

Now let's look at list of available parameters we need to create Toggle:

Parameter Type Default Description

el HTMLElement
string Toggle element. HTMLElement or string with CSS selector of toggle element

object

Parameter	Type	Default	Description
el	HTMLElement string		Toggle element. HTMLElement or string with CSS selector of toggle element
on	object		Object with events handlers. For example: `var toggle = app.toggle.create({ el: '.toggle', on: { change: function () { console.log('Toggle changed') } } })`

Object with events handlers. For example:

var toggle = app.toggle.create({
  el: '.toggle',
  on: {
    change: function () {
      console.log('Toggle changed')
    }
  }
})

Toggle Methods & Properties

So to create Toggle we have to call:

var toggle = app.toggle.create({ /* parameters */ })

After that we have its initialized instance (like toggle variable in example above) with useful methods and properties:

Properties
toggle.app	Link to global app instance
toggle.el	Toggle HTML element
toggle.$el	Dom7 instance with toggle HTML element
toggle.inputEl	Toggle input HTML element
toggle.$inputEl	Dom7 instance with toggle input HTML element
toggle.checked	Boolean property indicating whether it is input is checked or not
toggle.params	Toggle parameters
Methods
toggle.toggle()	Toggle input state
toggle.on(event, handler)	Add event handler
toggle.once(event, handler)	Add event handler that will be removed after it was fired
toggle.off(event, handler)	Remove event handler
toggle.off(event)	Remove all handlers for specified event
toggle.emit(event, ...args)	Fire event on instance

Toggle Events

Toggle will fire the following DOM events on toggle element and events on app and toggle instance:

DOM Events

Event	Target	Description
toggle:change	Toggle Element<div class="toggle">	Event will be triggered when Toggle state has been changed
toggle:beforedestroy	Toggle Element<div class="toggle">	Event will be triggered right before Toggle instance will be destroyed

App and Toggle Instance Events

Toggle instance emits events on both self instance and app instance. App instance events has same names prefixed with toggle.

Event	Arguments	Target	Description
change	toggle	toggle	Event will be triggered when toggle state has been changed. As an argument event handler receives toggle instance
toggleChange	toggle	app
beforeDestroy	toggle	toggle	Event will be triggered right before Toggle instance will be destroyed. As an argument event handler receives toggle instance
toggleBeforeDestroy	toggle	app

Toggle Auto Initialization

If you don't need to use toggle API and your toggle is inside of page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional toggle-init class:

<!-- Add toggle-init class -->
<label class="toggle toggle-init">
  <input type="checkbox" />
  <span class="toggle-icon"></span>
</label>

In this case if you need to access created Toggle instance you can use the app.toggle.get app method:

var toggle = app.toggle.get('.toggle');

if (toggle.checked) {
  // do something
}

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

.ios {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
  /*
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  */
  --f7-toggle-inactive-knob-bg-color: #fff;
  --f7-toggle-active-knob-bg-color: #fff;
  --f7-toggle-inactive-border-color: #e5e5e5;
  --f7-toggle-inactive-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-toggle-inactive-border-color: #555;
  --f7-toggle-inactive-bg-color: #555;
}
.md {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-toggle-inactive-bg-color: var(--f7-md-surface-variant);
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  --f7-toggle-inactive-knob-bg-color: var(--f7-md-outline);
  --f7-toggle-active-knob-bg-color: var(--f7-md-on-primary);
  --f7-toggle-inactive-border-color: var(--f7-md-outline);
  --f7-toggle-active-border-color: var(--f7-theme-color);
}

Examples

toggle.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Toggle</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Super Heroes</div>
    <div class="list list-strong list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Batman</div>
              <div class="item-after">
                <div class="toggle toggle-init">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Aquaman</div>
              <div class="item-after">
                <div class="toggle toggle-init color-blue">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Superman</div>
              <div class="item-after">
                <div class="toggle toggle-init color-red">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Hulk</div>
              <div class="item-after">
                <div class="toggle toggle-init color-green">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Spiderman</div>
              <div class="item-after">
                <div class="toggle toggle-init disabled">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Ironman</div>
              <div class="item-after">
                <div class="toggle toggle-init toggle-init">
                  <input type="checkbox" checked disabled>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Thor</div>
              <div class="item-after">
                <div class="toggle toggle-init color-orange">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Wonder</div>
              <div class="item-after">
                <div class="toggle toggle-init color-pink">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

Improve this Doc

On this page

Toggle Layout
Toggle Colors
Toggle App Methods
Toggle Parameters
Toggle Methods & Properties
Toggle Events

DOM Events
App and Toggle Instance Events

Toggle Auto Initialization
CSS Variables
Examples