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

1. 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>
       
   
   
   
2. 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>
       
   
   
   
3. 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>
       
   

Step 8 - Run the Application

Now, we are ready to run our Project. So, click the Ripple – Nexus (Galaxy) for running the application (Apache Ripple is a free mobile simulator).

Output Main Screen

Output 1 After Mutiple Ionic Toggle button control

Output 2 With Color Classes

Conclusion

I hope you understood how to use the Ionic Toggle classes in the Ionic blank app, using Visual Studio 2015 and how to run it.