Improve how the toggle component can be checked/unchecked

[paulovieira]

Is your feature request related to a problem? Please describe.

The objective is to improve the toggle component. The html produced by framework7 is something like:

<div class="list simple-list">
    <ul>
        <li>
            <span>Batman</span>
            <label class="toggle toggle-init">
                <input type="checkbox" checked="">
                <span class="toggle-icon"></span>
            </label>
        </li>
    </ul>
</div>

To change the value of a toggle (from "unchecked" to "checked", for instance) the user has to click/tap the actual toggle (that is, the <span class="toggle-icon"></span> el). But it's also natural to tap the text associated to that toggle (that is, the <span>Batman</span> el).

Unfortunately the toggle will not work that way. The developer has to manually handle that behaviour, which is frustrating

Describe the solution you'd like

When the user makes a click/tap in the text associated to the toggle, the toggle should change (the toggle's toggle() method should be called).

Thanks for considering this.

[nolimits4web]

You have two options to do it:

1.

<li>
  <label style="display: flex; justify-content: space-between; width: 100%;">
    <span>Batman</span>
    <span class="toggle toggle-init">
      <input id="batman-toggle" type="checkbox" checked>
      <span class="toggle-icon"></span>
    </span>
  </label>
</li>

2.

<li>
  <label for="batman-toggle">Batman</label>
  <label class="toggle toggle-init">
    <input id="batman-toggle" type="checkbox" checked>
    <span class="toggle-icon"></span>
  </label>
</li>