ionic tutorial - Ionic Toggle Class | Ionic - Toggle - ionic - ionic development - ionic 2 - ionic framework
- The Toggle Component is an on/off switch that can be used for a true/false variable in your application.
- A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Toggles can also have colors assigned to them, by adding any color attribute.
- Sometimes there are two options available for users to choose. The most efficient way to handle these situations are toggle forms.
- Ionic gives us classes for toggle elements that are animated and easy to implement.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Using Toggle
- Toggle can be implemented using two Ionic classes. First, we need to create label for the same reason we explained in last tutorial and assign toggle class to it.
- Inside our label will be created. You will notice two more ionic classes used in the example below. track class will add background styling to our checkbox and color animation when toggle is tapped. handle class is used to add circle button to it.
- This example shows two toggle forms. The first one is checked, the second one isn't.
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
<br>
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Above code will produce following screen
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Multiple Toggles
- Most of the time when you want to add more than one element of the same kind in Ionic, the best way is to use list items.
- The class that is used for multiple toggles is item-toggle. The next example shows how to create list with for toggles. First one and the second one is checked.
<ul class="list">
<li class="item item-toggle">
Toggle 1
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle 2
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle 3
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle 4
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Above code will produce following screen
Styling Toggle
- All Ionic color classes can be applied to toggle element. Prefix will be toggle. We will apply this to label element.
- below example shows all the colors applied.
<ul class="list">
<li class="item item-toggle">
Toggle Light
<label class="toggle toggle-light">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Stable
<label class="toggle toggle-stable">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Positive>
<label class="toggle toggle-positive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Calm
<label class="toggle toggle-calm">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Balanced
<label class="toggle toggle-balanced">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Energized
<label class="toggle toggle-energized">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Assertive
<label class="toggle toggle-assertive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Royal
<label class="toggle toggle-royal">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<li class="item item-toggle">
Toggle Dark
<label class="toggle toggle-dark">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Above code will produce following screen
