Post
Ask Question

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

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.

  1. Creating the Ionic Toggle

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

    Coding
    1. <label class="toggle">    
    2.     
    3. <input type="checkbox">    
    4.     
    5. <div class="track">    
    6.     
    7. <div class="handle"></div>    
    8.     
    9. </div>    
    10.     
    11. </label>  
    12.   
    13. <br>  
    14.   
    15. <label class="toggle">    
    16.     
    17. <input type="checkbox">    
    18.     
    19. <div class="track">    
    20.     
    21. <div class="handle"></div>    
    22.     
    23. </div>    
    24.     
    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">  
    2.   
    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>  
    12.   
    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>  
    22.   
    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>  
    32.   
    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>  
    42.   
    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">  
    2.   
    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>  
    12.   
    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>  
    22.   
    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>  
    32.   
    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>  
    42.   
    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>  
    52.   
    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>  
    62.   
    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>  
    72.   
    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>  
    82.   
    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.


Similar Articles