Toggle

Layout is pretty simple:

Inside of 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 . So to change its color just add color-[color] class to toggle element.

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

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({ /* 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:

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.

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:

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
}

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>
      </label>
    </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>
</div>