Working With Ionic Toggle Classes In Ionic Blank App Using Visual Studio 2015

Article

Before reading this article, please go through the article links given below.

Apache Cordova

Apache Cordova is an open source project that aims at letting mobile developers build applications for all major mobile platforms, using HTML, CSS and JavaScript technologies.

Ionic Framework

Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies. like HTML, CSS, and JavaScript.

Building Ionic Blank App with different Toggle Classes in Visual Studio 2015

Let's see how Ionic Framework makes the use of Toggle class with different Styles.

A toggle button allows the user to change a setting between two states. It displays checked/unchecked states as a button. It is basically an on/off button with a light indicator.

It is beneficial if the user has to change the setting between two states. It can be used to On/Off Sound, Wi-Fi, Bluetooth etc.

Toggel Button

Let’s see how to build Ionic Toggle classes with Ionic Blank apps.

Prerequisites

Visual Studio 2015
Visual Studio Tools for Apache Cordova

Follow the below steps.

Step 1 Create an Ionic Blank app

Let’s get started with creating New Project. Open Visual Studio 2015 and click File -> New -> Project option for creating Ionic Blank apps using Ionic Framework.

Step 2 Giving the Project Name

Then, New Project window will open. There, you can select an Installed -> Template -> Java Script -> Apache Cordova Apps -> Ionic JavaScript Blank.

Type project name as Ionic-Toggle app and click the OK button.

Step 3 Main Screen

Step 4 Adding List Item Control

Go to the Solution bar and choose the index.html. This is the starting screen of your app. We can add our HTML coding here.

Toggle can be implemented using two Ionic classes. We need to create label and assign toggle class to it. Track class will add background styling to our checkbox and color will change when toggle is tapped. Handle class is used to add circle button to it.

Creating the Ionic Toggle

In HTML, we use input tag and Toggle Class for using Toggle button.

Coding
1. <label class="toggle">
3. <input type="checkbox">
5. <div class="track">
7. <div class="handle"></div>
9. </div>
11. </label>
13. <br>
15. <label class="toggle">
17. <input type="checkbox">
19. <div class="track">
21. <div class="handle"></div>
23. </div>
25. </label>
Creating Multiple Ionic Toggle button

We can add multiple Ionic toggle buttons using the Item Class. With the help of Item class, we make item list for each and every toggle button.

Coding
1. <ul class="list">
3. <li class="item item-toggle">
4. Toggle Item 1
5. <label class="toggle">
6. <input type="checkbox">
7. <div class="track">
8. <div class="handle"></div>
9. </div>
10. </label>
11. </li>
13. <li class="item item-toggle">
14. Toggle Item 2
15. <label class="toggle">
16. <input type="checkbox">
17. <div class="track">
18. <div class="handle"></div>
19. </div>
20. </label>
21. </li>
23. <li class="item item-toggle">
24. Toggle Item 3
25. <label class="toggle">
26. <input type="checkbox">
27. <div class="track">
28. <div class="handle"></div>
29. </div>
30. </label>
31. </li>
33. <li class="item item-toggle">
34. Toggle Item 4
35. <label class="toggle">
36. <input type="checkbox">
37. <div class="track">
38. <div class="handle"></div>
39. </div>
40. </label>
41. </li>
43. </ul>
Adding Color to the Ionic Toggle Button

We can also use the color class for each element. For example, here we apply the color class to the Ionic Toggle element. Ionic framework gives us set of nine predefined color classes. You can use these colors or you can override it with your own styling. The following list shows default set of 9 colors provided by Ionic.

Coding
1. <ul class="list">
3. <li class="item item-toggle">
4. Toggle Light
5. <label class="toggle toggle-light">
6. <input type="checkbox">
7. <div class="track">
8. <div class="handle"></div>
9. </div>
10. </label>
11. </li>
13. <li class="item item-toggle">
14. Toggle Stable
15. <label class="toggle toggle-stable">
16. <input type="checkbox">
17. <div class="track">
18. <div class="handle"></div>
19. </div>
20. </label>
21. </li>
23. <li class="item item-toggle">
24. Toggle Positiv>
25. <label class="toggle toggle-positive">
26. <input type="checkbox">
27. <div class="track">
28. <div class="handle"></div>
29. </div>
30. </label>
31. </li>
33. <li class="item item-toggle">
34. Toggle Calm
35. <label class="toggle toggle-calm">
36. <input type="checkbox">
37. <div class="track">
38. <div class="handle"></div>
39. </div>
40. </label>
41. </li>
43. <li class="item item-toggle">
44. Toggle Balanced
45. <label class="toggle toggle-balanced">
46. <input type="checkbox">
47. <div class="track">
48. <div class="handle"></div>
49. </div>
50. </label>
51. </li>
53. <li class="item item-toggle">
54. Toggle Energized
55. <label class="toggle toggle-energized">
56. <input type="checkbox">
57. <div class="track">
58. <div class="handle"></div>
59. </div>
60. </label>
61. </li>
63. <li class="item item-toggle">
64. Toggle Assertive
65. <label class="toggle toggle-assertive">
66. <input type="checkbox">
67. <div class="track">
68. <div class="handle"></div>
69. </div>
70. </label>
71. </li>
73. <li class="item item-toggle">
74. Toggle Royal
75. <label class="toggle toggle-royal">
76. <input type="checkbox">
77. <div class="track">
78. <div class="handle"></div>
79. </div>
80. </label>
81. </li>
83. <li class="item item-toggle">
84. Toggle Dark
85. <label class="toggle toggle-dark">
86. <input type="checkbox">
87. <div class="track">
88. <div class="handle"></div>
89. </div>
90. </label>
91. </li>
92. </ul>