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.

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.

Apache Cordova

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

Apache Cordova

Step 3

Main Screen

Apache Cordova

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
    1. <div class="list">  
    2.     <div class="item">Computer</div>  
    3.     <div class="item">Software</div>  
    4.     <div class="item">Hardware</div>  
    5. </div>  
    Apache Cordova

  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
    1. <div class="list list-inset">   
    2. <div class="item">Computer</div>   
    3. <div class="item">Software</div>   
    4. <div class="item">Hardware</div>   
    5. </div>   
    Apache Cordova

  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
    1. <div class="list">  
    2.     <div class="item item-divider">Item Divider 1-Software</div>  
    3.     <div class="item">System Software</div>  
    4.     <div class="item">Application Software</div>  
    5.     <div class="item item-divider">Item Divider 2-Hardware</div>  
    6.     <div class="item">Holo Lens</div>  
    7.     <div class="item">Samrt Watch</div>  
    8.     <div class="item">Pendrive</div>  
    9. </div>  
    Apache Cordova

  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
    1. <div class="list">  
    2.     <div class="item item-icon-left"> <i class="icon ion-android-alarm-clock"></i> Left side Icon </div>  
    3.     <div class="item item-icon-right"> <i class="icon ion-android-bicycle"></i> Right side Icon </div>  
    4.     <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>  
    5.     <div class="item item-icon-left"> <i class="icon ion-home"></i> <span class="text-note">Text note</span> . </div>  
    6. </div>  
    Apache Cordova

  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.

    Apache Cordova

    Next, Add the following coding.
    1. <div class="list">  
    2.     <div class="item item-avatar"> <img src="img/ro.jpg">  
    3.         <h3>Avatar Style</h3>  
    4.     </div>  
    5.     <div class="item item-thumbnail-left"> <img src="img/ro.jpg">  
    6.         <h3>Thumbnail Style</h3>  
    7.     </div>  
    8.     <div class="item item-royal"> <img src="img/ro.jpg">  
    9.         <h3>Royal Style</h3>  
    10.     </div>  
    11. </div>  
    Apache Cordova

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).

Apache Cordova

Output

Main Screen

Apache Cordova

Output 1

After Adding Ionic List Item control

Apache Cordova

Output 2

Changing to Ionic Inset List

Apache Cordova

Output 3

Apply List Item Divider

Apache Cordova

Output 4

Adding Predefined Icons to List Item

Apache Cordova

Output 5

Applying User Image as Icons in List Items

Apache Cordova

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.

Up Next
    Ebook Download
    View all
    Learn
    View all