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