Ionic Toggle - Ionic

What is Toggle in Ionic Framework?

At times, two options are made available for the user to choose from. These types of situations are handled by toggle forms. The classes for toggle elements which are animated are facilitated by Ionic framework, making it easy to implement.

How to use Toggle in Ionic Framework?

Two Ionic classes are used to implement Toggle – create label and then assign toggle class to it. Two more classes can be used – track class, which will add background styling and colour animation when the toggle is tapped and handle class, which will add circle button to it.

The example below displays two toggle forms.

The screen produced by the above code appears as:

Ionic Toggle

How to add multiple Toggles in Ionic Framework?

A list item is used mostly to add more than one element of the same kind in Ionic. The class that is used for multiple toggles is item-toggle. The next example shows how to create list with for toggles. Both are checked.

The screen produced by the above code appears as:

Ionic Toggle List

How to do styling Toggle in Ionic Framework?

The Ionic colour classes can be applied to toggle element. Prefix will be toggle. This is applied to label element.

The screen produced by the above code appears as:

Ionic Toggle Colour

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ionic Topics