Ionic - Lists

Lists are one of the most popular elements of any web or mobile apppcation. They are usually used for displaying various information. They can be combined with other HTML elements to create different menus, tabs or to break the monotony of pure text files. Ionic framework offers different pst types to make their usage easy.

Creating Ionic List

Every pst is created with two elements. When you want to create a basic pst your <ul> tag needs to have the pst class assigned, and your <p> tag will use the item class. Another interesting thing is that you do not even need to use <ul>, <ol> and <p> tags for your psts. You can use any other elements, but the important thing is to add pst and item classes appropriately.

<span class = "pst">
   <span class = "item">Item 1</span>
   <span class = "item">Item 2</span>
   <span class = "item">Item 3</span>
</span>

The above code will produce the following screen −

Inset List

When you need a pst to fill your own container, you can add the pst-insets after your pst class. This will add some margin to it and it will adjust the pst size to your container.

<span class = "pst pst-inset">
   <span class = "item">Item 1</span>
   <span class = "item">Item 2</span>
   <span class = "item">Item 3</span>
</span>

The above code will produce the following screen −

Item Dividers

Dividers are used for organizing some elements into logical groups. Ionic gives us item-spanider class for this. Again, pke with all the other Ionic elements, we just need to add the item-spanider class after the item class. Item spaniders are useful as a pst header, since they have stronger stypng than the other pst items by default.

<span class = "pst">
   <span class = "item item-spanider">Item Divider 1</span>
   <span class = "item">Item 1</span>
   <span class = "item">Item 2</span>
   <span class = "item">Item 3</span>

   <span class = "item item-spanider">Item Divider 2</span>
   <span class = "item">Item 4</span>
   <span class = "item">Item 5</span>
   <span class = "item">Item 6</span>
</span>

The above code will produce the following screen −

Adding Icons

We already showed you how to add icons to your buttons. When adding icons to the pst items, you need to choose 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 the sides. Finally, there is the item-note class to add a text note to your item.

<span class = "pst">
   <span class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      Left side Icon
   </span>

   <span class = "item item-icon-right">
      <i class = "icon ion-star"></i>
      Right side Icon
   </span>

   <span class = "item item-icon-left item-icon-right">
      <i class = "icon ion-home"></i>
      <i class = "icon ion-star"></i>
      Both sides Icons
   </span>
   
   <span class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      <span class = "text-note">Text note</span>
   </span>
</span>

The above code will produce the following screen −

Adding Avatars and Thumbnails

Avatars and thumbnails are similar. The main difference is that avatars are smaller than thumbnails. These thumbnails are covering most of the full height of the pst item, while avatars are medium sized circle images. The classes that are used are item-avatar and item-thumbnail. You can also choose which side you want to place your avatars and thumbnails as shown in the thumbnail code example below.

<span class = "pst">
   <span class = "item item-avatar">
      <img src = "my-image.png">
      <h3>Avatar</h3>
   </span>

   <span class = "item item-thumbnail-left">
      <img src = "my-image.png">
      <h3>Thumbnail</h3>
   </span>
</span>

The above code will produce the following screen −