🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool!

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:

ParameterTypeDefaultDescription
elHTMLElement
string
Toggle element. HTMLElement or string with CSS selector of toggle element
onobject

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.appLink to global app instance
toggle.elToggle HTML element
toggle.$elDom7 instance with toggle HTML element
toggle.inputElToggle input HTML element
toggle.$inputElDom7 instance with toggle input HTML element
toggle.checkedBoolean property indicating whether it is input is checked or not
toggle.paramsToggle 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

EventTargetDescription
toggle:changeToggle Element<div class="toggle">Event will be triggered when Toggle state has been changed
toggle:beforedestroyToggle 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.

EventArgumentsTargetDescription
changetoggletoggleEvent will be triggered when toggle state has been changed. As an argument event handler receives toggle instance
toggleChangetoggleapp
beforeDestroytoggletoggleEvent will be triggered right before Toggle instance will be destroyed. As an argument event handler receives toggle instance
toggleBeforeDestroytoggleapp

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>