Working With Ionic Check Box Class 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 allowing the mobile developers to build the Applications for all the major mobile platforms, using HTML, CSS and JavaScript technologies.

Ionic Framework

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

Building Ionic Blank app with different Ionic Checkbox Classes in Visual Studio 2015

Let's see how Ionic Framework makes the use of Ionic Check Box control.

An Ionic Check Box class enables the user to select more option from a group of choices when paired with other Check Box Class controls. When a user clicks on a one Check Box, it becomes checked. You can click a check box to select it and click it again to deselect it.

Ionic framework offers different types to make their usage easy. Let’s see how to use the Check Box class with Ionic Blank apps.

Prerequisites

Visual Studio 2015.
Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below to use the Check Box class in Ionic Blank apps, using Ionic Framework.

Step 1

Create an Ionic Blank App

Let’s get ready to create a new project. Open Visual Studio 2015 and click File -> New -> Project Option to create Ionic Blank apps, using Ionic Framework.

Ionic

Step 2

Giving the Project Name

Subsequently, a New Project Window will open, where you can select an Installed -> Template -> Java Script -> Apache Cordova Apps ->Ionic JavaScript Blank.

Type Project Name Ionic-CheckBoxApp and click OK button.

Ionic

Step 3

Main Screen is shown below.

Ionic

Step 4

Adding Check Box Control

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

Creating the Ionic Check Box

In HTML, we use label, input tag and Check Box Class to add add Checkboxes.

Coding
1. <label class="checkbox">
2. <input type="checkbox">
3. </label> <br/> <br/> <label class="checkbox">
4. <input type="checkbox">
5. </label>
Ionic Multiple Checkbox

You can add multiple checkbox after your checkbox class to fit the checkbox in the container. This will add some margin to it and it will adjust Checkbox size to your container.

Coding
1. <ul class="list">
2. <li class="item item-checkbox"> SSLC <label class="checkbox">
3. <input type="checkbox">
4. </label> </li> <br />
5. <li class="item item-checkbox"> HSC <label class="checkbox">
6. <input type="checkbox">
7. </label> </li> <br />
8. <li class="item item-checkbox"> Under Graduation <label class="checkbox">
9. <input type="checkbox">
10. </label> </li> <br />
11. <li class="item item-checkbox"> Post-Graduation <label class="checkbox">
12. <input type="checkbox">
13. </label> </li>
14. </ul>
Adding Predefined Colors to Ionic Check Box

We can also use the color class to make it different for each checkbox. For example, here we apply the color class to the Ionic Checkbox element. Ionic framework gives us a set of nine predefined color classes. You can use these colors or you can override it with your own styling.

Coding
1. <ul class="list"> li class="item item-checkbox checkbox-light"> Checkbox-Light <label class="checkbox">
2. <input type="checkbox">
3. </label> </li>
4. <li class="item item-checkbox checkbox-stable"> Checkbox-Stable <label class="checkbox">
5. <input type="checkbox">
6. </label> </li>
7. <li class="item item-checkbox checkbox-positive"> Checkbox-Positive <label class="checkbox">
8. <input type="checkbox">
9. </label> </li>
10. <li class="item item-checkbox checkbox-calm"> Checkbox-Calm <label class="checkbox">
11. <input type="checkbox">
12. </label> </li>
13. <li class="item item-checkbox checkbox-balanced"> Checkbox-Balanced <label class="checkbox">
14. <input type="checkbox">
15. </label> </li>
16. <li class="item item-checkbox checkbox-energized"> Checkbox-Energized <label class="checkbox">
17. <input type="checkbox">
18. </label> </li>
19. <li class="item item-checkbox checkbox-assertive"> Checkbox-Assertive <label class="checkbox">
20. <input type="checkbox">
21. </label> </li>
22. <li class="item item-checkbox checkbox-royal"> Checkbox-Royal <label class="checkbox">
23. <input type="checkbox">
24. </label> </li>
25. <li class="item item-checkbox checkbox-dark"> Checkbox-Dark <label class="checkbox">
26. <input type="checkbox">
27. </label> </li>
28. </ul> // This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}
Adding Predefined Icons to Ionic Check Box

We can add the icons to the Checkbox Classes. When we add the icons to the items, you need to choose on what side you want to place them.

There are item-icon-left and item-icon-right classes for this. You can also combine those two classes, if you want to have your Icons on both the sides.

Coding
1. <ul class="list">
2. <li class="item item-checkbox checkbox-assertive ion-android-alarm-clock item-icon-right"> Alaram Clock <label class="checkbox">
3. <input type="checkbox">
4. </label> </li>
5. </ul>

Step 5

Run the Application

Now, we are ready to run our Project. Click the Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).

Ionic

Output

Main Screen is shown below.

Ionic

Output 1

After Adding Ionic Check Box control, the output looks, as shown below.

Ionic

Output 2

Adding Multiple Check Box will give the output, which is shown below.

Ionic

Output 3

Apply different predefined colors.

Ionic

Output 4

Adding Predefined icons to Check Box is shown below.

Ionic

Conclusion

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