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>
</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:

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:

Toggle Events

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

DOM Events

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.

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).

:root {
  --f7-toggle-handle-color: #fff;
}
.ios {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
  --f7-toggle-border-color: #e5e5e5;
  --f7-toggle-inactive-color: #fff;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-toggle-border-color: #555;
  --f7-toggle-inactive-color: #222;
}
.md {
  --f7-toggle-width: 36px;
  --f7-toggle-height: 14px;
  --f7-toggle-inactive-color: #b0afaf;
}
.md .theme-dark,
.md.theme-dark {
  --f7-toggle-inactive-color: #555;
}
.aurora {
  --f7-toggle-width: 40px;
  --f7-toggle-height: 20px;
  --f7-toggle-inactive-color: #aaa;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-toggle-inactive-color: #555;
}

Examples

<div class="block-title">Super Heroes</div>
<div class="list simple-list">
  <ul>
    <li>
      <span>Batman</span>
      <label class="toggle toggle-init color-black">
        <input type="checkbox" checked>
        <span class="toggle-icon"></span>
      </label>
    </li>
    <li>
      <span>Aquaman</span>
      <label class="toggle toggle-init color-blue">
        <input type="checkbox" checked>
        <span class="toggle-icon"></span>
      </label>
    </li>
    <li>
      <span>Superman</span>
      <label class="toggle toggle-init color-red">
        <input type="checkbox" checked>
        <span class="toggle-icon"></span>
      </label>
    </li>
    <li>
      <span>Hulk</span>
      <label class="toggle toggle-init color-green">
        <input type="checkbox">
        <span class="toggle-icon"></span>
      </label>
    </li>
    <li>
      <span>Spiderman (Disabled)</span>
      <label class="toggle toggle-init disabled">
        <input type="checkbox">
        <span class="toggle-icon"></span>
      </label>
    </li>
    <li>
      <span>Ironman (Disabled)</span>
      <label class="toggle toggle-init toggle-init">
        <input type="checkbox" checked disabled>
        <span class="toggle-icon"></span>
      </label>
    </li>
    <li>
      <span>Thor</span>
      <label class="toggle toggle-init color-orange">
        <input type="checkbox" checked>
        <span class="toggle-icon"></span>
      </label>
    </li>
    <li>
      <span>Wonder Woman</span>
      <label class="toggle toggle-init color-pink">
        <input type="checkbox">
        <span class="toggle-icon"></span>
      </label>
    </li>
  </ul>
</div>