ionic List
List is a widely used UI element, used in almost all mobile apps.
Lists can contain basic text, buttons, switches, icons, thumbnails, etc.
List items can be any HTML element. The container element needs the list class, and each list item needs to use the item class.
ionList and ionItem can easily support various interaction methods, such as swipe editing, drag sorting, and deleting items.
Basic usage:
<ul class="list">
<li class="item">
...
</li>
</ul>
List dividers
We can use the item-divider class to create dividers for the list. By default, list items are distinguished by different background colors and bold fonts, but you can easily customize it.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="../index.html">
Butterfinger
</a>
...
</div>
List with icons
We can specify icons on the left or right side of list items.
Use item-icon-left to place the icon on the left, and item-icon-right to place the icon on the right. If you need icons on both sides, just add both classes.
In the following example, we used the <a> tag in list items to make each list item clickable.
When list items use <a> or <button> elements, if no icon is added on the right side, an arrow will automatically be added.
In the example, the first item has only a left icon, the second item has icons on both sides, the third item has a right icon (and an item-note annotation), and the fourth item has a badge element.
<div class="list">
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="../index.html">
<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="../index.html">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="../index.html">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
Button list
Use the item-button-right or item-button-left class to place buttons in list items.
<div class="list">
<div class="item item-button-right">
Call Ma
<button class="button button-positive">
<i class="icon ion-ios-telephone"></i>
</button>
</div>
...
</div>
List with avatars
Use item-avatar to create a list with avatars:
<div class="list">
<a class="item item-avatar" href="../index.html">
<img src="venkman.jpg.html">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
...
</div>
Thumbnail list
The item-thumbnail-left class is used to add a left-aligned thumbnail, and the item-thumbnail-right class is used to add a right-aligned thumbnail.
<div class="list">
<a class="item item-thumbnail-left" href="../index.html">
<img src="cover.jpg.html">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
Inset list
We can embed a list inside a container, and the list will not display at full width.
The style for an inset list is: list list-inset. The difference from a regular list is that it has margins set, similar to tabs.
Inset lists have no shadow effect, which performs better when scrolling.
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
...
</div>
Other extensions