ionic-list

 

ionic-list2

 

ionic-list3

Lists are very popular in the mobile application. A list is like a table but with one column multiple rows(just assume). Most of us will use Gmail app. Mails are arranged like a list. Notifications are also arranged in a list format. Many popular applications use list. They are easy to scroll.

To create a list in Ionic Framework, <ion-list> directive is used. Inside <ion-list>, we can add many <ion-item>.

 

Basic List


<ion-list>

<ion-item>

    Java

    </ion-item>

    <ion-item>

    SAS

    </ion-item>

    <ion-item>

    SPSS

    </ion-item>

    <ion-item>

    Python

    </ion-item>

    <ion-item>

    Oracle

    </ion-item>

    <ion-item>

    MySql

    </ion-item>

    <ion-item>

    Ionic Framework

    </ion-item>

</ion-list>

 

List Dividers

We can divide the list by changing the background color of the parent list. By default, Ionic offers item-divider class to highlight the parent list.

You can also use your custom class, if needed.


<ion-list>

<ion-item class=”item-divider”>

    Statistics

    </ion-item>

    <ion-item>

    SAS

    </ion-item>

    <ion-item>

    SPSS

    </ion-item>

    <ion-item class=”item-divider”>

    Databases

    </ion-item>

    <ion-item>

    Oracle

    </ion-item>

    <ion-item>

    MySql

    </ion-item>

    <ion-item>

    Ionic Framework

    </ion-item>

</ion-list>

 

List Icons

We can use an icon with a list to give a better user experience. We can either use ionic built-in icons or any third party icon.

Use item-icon-left to line up the icon to the left, and item-icon-right to line up the icon to the right. When a list item has an icon on both sides then both the icon classes should be applied.

 

Example


<ion-list>

 <a class="item item-icon-left" href="#">

    <i class="icon ion-email"></i>

    Check mail

 </a>


 <a class="item item-icon-left item-icon-right" href="#">

    <i class="icon ion-chatbubble-working"></i>

    Call Ma

    <i class="icon ion-ios-telephone-outline"></i>

 </a>


 <a class="item item-icon-left" href="#">

    <i class="icon ion-mic-a"></i>

    Record album

    <span class="item-note">

    Grammy

    </span>

 </a>


 <a class="item item-icon-left" href="#">

    <i class="icon ion-person-stalker"></i>

    Friends

    <span class="badge badge-assertive">0</span>

 </a>


</ion-list>

Here item class is added directly without defining ion-item.

 

List Buttons

We can add a button to list. Use item-button-right or item-button-left to place a button on an item.


<ion-list>

<div class="item item-button-right">

    Call Ma

    <button class="button button-positive">

    <i class="icon ion-ios-telephone"></i>

    </button>

</div>

</ion-list>

 

List Item with Avatars

Previously we added button and icon to the list. Likewise, we can also add images to the list. Use item-avatar class


<ion-list>

    <a class="item item-avatar" href="#">

    <img src="http://ionicframework.com/img/docs/venkman.jpg">

    <h2>Venkman</h2>

    <p>Back off, man. I'm a scientist</p>

    </a>


    <a class="item item-avatar" href="#">

    <img src="http://ionicframework.com/img/docs/spengler.jpg">

    <h2>Egon</h2>

    <p>This is egon</p>

    </a>


    <a class="item item-avatar" href="#">

    <img src="http://ionicframework.com/img/docs/stantz.jpg">

    <h2>Ray</h2>

    <p>Hi ray.. Whats up?</p>

    </a>


    <a class="item item-avatar" href="#">

    <img src="http://ionicframework.com/img/docs/winston.jpg">

    <h2>Winston</h2>

    <p>Back off, man. I'm a scientist</p>

    </a>


    <a class="item item-avatar" href="#">

    <img src="http://ionicframework.com/img/docs/tully.jpg">

    <h2>Tully</h2>

    <p>Back off, man. I'm a scientist</p>

    </a>


    <a class="item item-avatar" href="#">

    <img src="http://ionicframework.com/img/docs/barrett.jpg">

    <h2>Dana</h2>

    <p>Back off, man. I'm a scientist</p>

    </a>


    <a class="item item-avatar" href="#">

    <img src="http://ionicframework.com/img/docs/slimer.jpg">

    <h2>Slimer</h2>

    <p>Back off, man. I'm a scientist</p>

    </a>

</ion-list>

 

List Item with Thumbnails

Item thumbnails are used to display YouTube-like search results or list albums etc.

To create a thumbnail-styled item, use the item-thumbnail-left class to have it aligned on the left, and item-thumbnail-right class to have it aligned on the right.


<ion-list>


    <a class="item item-thumbnail-left" href="#">

    <img src="http://ionicframework.com/img/docs/blue-album.jpg">

    <h2>Pretty Hate Machine</h2>

    <p>Nine Inch Nails</p>

    </a>


    <a class="item item-thumbnail-left" href="#">

    <img src="http://ionicframework.com/img/docs/siamese-dream.jpg">

    <h2>Pretty Hate Machine</h2>

    <p>Nine Inch Nails</p>

    </a>


    <a class="item item-thumbnail-left" href="#">

    <img src="http://ionicframework.com/img/docs/nevermind.jpg">

    <h2>Pretty Hate Machine</h2>

    <p>Nine Inch Nails</p>

    </a>


    <a class="item item-thumbnail-left" href="#">

    <img src="http://ionicframework.com/img/docs/license-to-ill.jpg">

    <h2>Pretty Hate Machine</h2>

    <p>Nine Inch Nails</p>

    </a>


    <a class="item item-thumbnail-left" href="#">

    <img src="http://ionicframework.com/img/docs/dookie.jpg">

    <h2>Pretty Hate Machine</h2>

    <p>Nine Inch Nails</p>

    </a>


</ion-list>

 

Inset Lists

Instead of using full width for items, list-inset class gives some margin for list item


<div class="list list-inset">

<div class="item">

Raiders of the Lost Ark

</div>

<div class="item">

Raiders of the Lost Ark

</div>

<div class="item">

Raiders of the Lost Ark

</div>

<div class="item">

Raiders of the Lost Ark

</div>

<div class="item">

Raiders of the Lost Ark

</div>

</div>