Working With Ionic List Item Class In Ionic Blank App using Visual Studio 2015

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

• Quick Start On Apache Cordova Using Visual Studio 2015
• Using Ionic Blank App Using Visual Studio 2015
• Using Ionic Side Menu App Using Visual Studio 2015
• Using Ionic Tabs App Using Visual Studio 2015
• Working With Color Classes In Ionic Blank App Using Visual Studio 2015
• Working With Button Class In Ionic Blank App Using Visual Studio 2015

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 Ionic List Classes in Visual Studio 2015

Let's see how Ionic Framework makes the use of List Item Control

The ListBox represents a Windows control to display a list of items to a user. It's one of the most popular elements of any web or mobile application. They are usually used for displaying various information.

They can be combined with other HTML elements for creating different menus, tabs or just to break the monotony of pure text files. Ionic framework offers different list types to make their usage easy.

Let’s see how to use the List Item Class with Ionic Blank Apps.

Prerequisites

• Visual Studio 2015
• Visual Studio Tools for Apache Cordova.

Follow the below steps to use the List Item 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 for creating Ionic Blank Apps using Ionic Framework.



Step 2 Giving the Project Name

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

Type Project Name ionic-js-ListBoxApp 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.

1. Creating the Ionic List
   
   In HTML, we use <ul> tag and <li> tag for adding items. Here we are using Item Class.
   
   Coding
   

   <div class="list">
       <div class="item">Computer</div>
       <div class="item">Software</div>
       <div class="item">Hardware</div>
   </div>

   
   
   
2. Ionic Inset List
   
   you can add list-inset after your list class to fit the items in the container. This will add some margin to it and it will adjust list size to your container.
   
   Coding
   

   <div class="list list-inset">
   <div class="item">Computer</div>
   <div class="item">Software</div>
   <div class="item">Hardware</div>
   </div>

   
   
   
3. Ionic Item Divider
   
   Dividers are used for organizing some elements into logical groups. Ionic gives us item-divider class for this. It's Segmenting the Items.
   
   Coding
   

   <div class="list">
       <div class="item item-divider">Item Divider 1-Software</div>
       <div class="item">System Software</div>
       <div class="item">Application Software</div>
       <div class="item item-divider">Item Divider 2-Hardware</div>
       <div class="item">Holo Lens</div>
       <div class="item">Samrt Watch</div>
       <div class="item">Pendrive</div>
   </div>

   
   
   
4. Adding Predefined Icons to Ionic List
   
   We can add the Icons to the List Control. When adding icons to list 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 sides.
   
   Coding
   

   <div class="list">
       <div class="item item-icon-left"> <i class="icon ion-android-alarm-clock"></i> Left side Icon </div>
       <div class="item item-icon-right"> <i class="icon ion-android-bicycle"></i> Right side Icon </div>
       <div class="item item-icon-left item-icon-right"> <i class="icon ion-android-cloud-circle"></i> <i class="icon ion-camera"></i> Both sides Icons </div>
       <div class="item item-icon-left"> <i class="icon ion-home"></i> <span class="text-note">Text note</span> . </div>
   </div>

   
   
   
5. Adding Images as Icons to Ionic List
   
   We can also set the images as icons of List Items by right clicking on www->img->Add->Existing Item to add the image in the solution bar.
   
   
   
   Next, Add the following coding.
   

   <div class="list">
       <div class="item item-avatar"> <img src="img/ro.jpg">
           <h3>Avatar Style</h3>
       </div>
       <div class="item item-thumbnail-left"> <img src="img/ro.jpg">
           <h3>Thumbnail Style</h3>
       </div>
       <div class="item item-royal"> <img src="img/ro.jpg">
           <h3>Royal Style</h3>
       </div>
   </div>

   
   

Step 5 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 Adding Ionic List Item control



Output 2

Changing to Ionic Inset List



Output 3

Apply List Item Divider



Output 4

Adding Predefined Icons to List Item



Output 5

Applying User Image as Icons in List Items



Conclusion

I hope you understood how to use the Ionic List Item classes in the Ionic blank App using Visual Studio 2015 and how to run it.