Ionic List

A list can contain a header to display a title at the top of the list. The header is created by adding the component ion-list-header as the child of the ion-list. Items in the list can be separated using the component ion-item-divider.
In Listing below, a title is added to the list and a divider separates two items.

<ion-list>
	<ion-list-header>
		Items
	</ion-list-header>
	<ion-item>
		Item 1
	</ion-item>
	<ion-item-divider>
	</ion-item-divider>
	<ion-item>
		Item 2
	</ion-item>
</ion-list>

 

Grouping of Items

If a list contains a lot of items, it’s better to group those items for users to view and find them easily. A typical example is the contact list, which is usually grouped by the first character of each contact’s first name. Grouping
of items can be done using the component ion-item-group. Listing below an example of the simple contacts list. We use the component ion-item-divider to show the name of each group. We don’t need to use the component ion-list when grouping items.

<ion-item-group>
	<ion-item-divider>A</ion-item-divider>
	<ion-item>Alex</ion-item>
	<ion-item>Amber</ion-item>
</ion-item-group>
<ion-item-group>
	<ion-item-divider>B</ion-item-divider>
	<ion-item>Bob</ion-item>
	<ion-item>Brenda</ion-item>
</ion-item-group>

 

Icons
Ionic 2 provides over 700 ready-to-use icons. These icons can be displayed using the component ion-icon with the name of the icon. For each icon, there may be three variations for different platforms, that is, iOS, iOSOutline, and Material Design. For example, the icon book has three variations with names ios-book, ios-book-outline, and md-book.

<ion-list>
	<ion-item>
		<ion-icon name="book" item-left></ion-icon>
		Book
	</ion-item>
	<ion-item>
		<ion-icon name="build" isActive="false" item-left></ion-icon>
		Build
		<ion-icon name="build" item-right></ion-icon>
	</ion-item>
	<ion-item>
		<ion-icon ios="ios-happy" md="md-sad" item-right></ion-icon>
		Happy or Sad
	</ion-item>
</ion-list>

 

Avatars

Avatars create circular images. They are typically used to display users’ profile images. In Ionic 2, avatars are created by using the component ionavatar to wrap img elements.

<ion-list>
	<ion-item>
		<ion-avatar item-left>
		<img src="http://placehold.it/60?text=A">
		</ion-avatar>
		Alex
	</ion-item>
	<ion-item>
		<ion-avatar item-left>
		<img src="http://placehold.it/60?text=B">
		</ion-avatar>
		Bob
	</ion-item>
	<ion-item>
		<ion-avatar item-left>
		<img src="http://placehold.it/60?text=D">
		</ion-avatar>
		David
	</ion-item>
</ion-list>

 

Thumbnails
Thumbnails are rectangular images larger than avatars. In Ionic 2, thumbnails are created by using the component ion-thumnail to wrap img elements.

<ion-list>
	<ion-item>
		<ion-thumbnail item-left>
			<img src="http://placehold.it/100x60?text=F1">
		</ion-thumbnail>
		Apple
	</ion-item>
	<ion-item>
		<ion-thumbnail item-left>
		<img src="http://placehold.it/100x60?text=F2">
		</ion-thumbnail>
		Banana
	</ion-item>
	<ion-item>
		<ion-thumbnail item-left>
		<img src="http://placehold.it/100x60?text=F3">
		</ion-thumbnail>
		Orange
	</ion-item>
</ion-list>