CSS Components in Ionic - Lists

In this post we are going to discuss about different variations of Lists in Ionic. The most essential component of any app is that involves displaying a list of items is a list component. In Ionic creating a list is very simple because it is driven by pure CSS classes.

In Ionic, if you have a parent element with a class named list and n number of child element with a class named item, all items align themselves in the form of an Ionic-styled list. For example,

<ion-content class="padding">
  <div class="list">
    <div class="item">List Item 1</div>
    <div class="item">List Item 2</div>
    <div class="item">List Item 3</div>
    <div class="item">List Item 4</div>
  </div>
</ion-content>

You can also add a divider to organize and group list items. To add a divider you need to use class item-divider as shown below.

<ion-content class="padding">
  <div class="list">
    <div class="item item-divider">
       List Group 1
       <div class="item">List Item 1</div>
       <div class="item">List Item 2</div>
     </div>
     <div class="item item-divider">
        List Group 2
        <div class="item">List Item 3</div>
        <div class="item">List Item 4</div>
    </div>
  </div>
</ion-content>

Along with  the text, icons and buttons can also be assigned to each list item. You can use the inbuilt Ionicons to assign the icons to the list item. The icons can be added to left side of the item by using class item-icon-left or to the right side using class item-icon-right. For buttons use item-button-right or item-button-left to place the buttons either right or left.

<ion-content class="padding">
  <div class="list">
    <a class="item item-icon-left">
      <i class="icon ion-email"></i>Email
    </a>
    <div class="item item-button-right">Call
      <button class="button button-positive">
        <i class="icon ion-ios-telephone"></i>
      </button>
    </div>
  </div>
</ion-content>

Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.

Related articles

• Introducing Navbar in Bootstrap - Part 1 
• Enhance Data Display using Carousel in Bootstrap 
• Check which button is clicked in Asp Net Web Application using jQuery 
• Getting Started with BootStrap 
• Handle Mouse Events in jQuery 
• Control Content Placement in Bootstrap 
• Introducing Navbar in Bootstrap - Part 2 
• Blast.js - Blast Text Apart to Make it Manipulable 
• Create Web Note in Microsoft Edge Browser in Windows 10 
• Overview of Less.js