Framework7 v2
Support Framework7
stars forks
iOSAndroid
Improve this Doc

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:

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')
    }
  }
})

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
}

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>