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

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

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.