Ionic lists allow the developer to group a set of related items in lists. The ionic list is made up of multiple rows of items that can contain buttons, text, icons, toggles, thumbnails, and much more. Ionic lists generally contain items with similar data content, such as images and text. An ion-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. Apart from the Ionic list, the Ionic framework has lots of pre-built components like modal, action sheet, and more.
In this article, we’ll learn how to use the ionic list and explore different child components we can use inside the list and we had demonstrated a few examples of lists with images, a list with icons, avatars, and more. Let get started.
Setup an Ionic List project
With the release of ionic version 4, the Ionic framework is no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. Let’s first create a blank Ionic Angular project.
ionic start listApp blank --type=angular
Creating Ionic Basic List with Ionic list header
Let’s create the first example of the Ionic list basic, where we’ll include the most used subcomponents of the Ionic list. We can change the Ionic list header background by using color properties. We can include an ionic list header at the top of the list by adding a list header <ion-list-header> element. Here’s a quick screenshot of what we’ll be building.
Ionic list with inset attribute
The Ionic lists don’t contain an outside margin by default. Ionic lists have few properties, if we set inset attributes on the list then we will have a margin around and rounded corners on the list. By default inset attribute is false. As we can compare the above image of the list with and without the inset attribute.
Ionic list example with divider
We have demonstrated an example of an ionic list with an ion items divider and we can add different colors available in ionic for ionic list item and divider. Ionic list divider is used for organizing the elements into logical groups. Ionic gives us the child component to separate items in a list.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic - List
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-list class="ion-padding">
<ion-list-header color="primary">
<ion-label>Items Header</ion-label>
</ion-list-header>
<ion-item>
Item type A 1
</ion-item>
<ion-item>
Item type A 2
</ion-item>
<ion-item-divider color="danger">
<ion-label>
Item Divider B
</ion-label>
</ion-item-divider>
<ion-item>
Item B 1
</ion-item>
<ion-item>
Item B 2
</ion-item>
</ion-list>
</ion-content>
Ionic list subcomponents
We can easily configure an Ionic list by adding its subcomponent like ion-list-header, ion-item, and ion-item-divider. The ionic list is a single component and can have the following subcomponents which we can control its color and mode properties.
Subcomponents | Description |
---|---|
ion-list-header | A list Header is a header component for a list. |
ion-item | Adding list row |
ion-item-divider | Ionic dividers are used for organizing some elements into logical groups. |
ion-thumbnail | Thumbnails can be used by themselves or inside of any element and they can place inside of an ion-item. |
ion-avatar | Avatars are circular components that usually wrap an image or icon. |
ion-item-sliding | A sliding item contains an item that can be dragged to reveal buttons. |
ion-item-group | Item groups are containers that organize similar items together. |
Ionic list with image
We can add an image in the Ionic list using the Avatars and thumbnails component. Both these elements are used with an Ionic list and ionic item. We’ll demonstrate here’s a quick screenshot of what we’ll be building.
We have used ion-thumbnail to add images to the list and we also need dummy data for the above list. Let’s create folder data in assets and file countries.json. We need to add the following dummy data in the countries.json file.
[
{
"name": "India",
"flag": "4/41/Flag_of_India.svg",
"area": 3287263,
"population": 1324171354
},
{
"name": "France",
"flag": "c/c3/Flag_of_France.svg",
"area": 640679,
"population": 64979548
},
{
"name": "United States",
"flag": "a/a4/Flag_of_the_United_States.svg",
"area": 9629091,
"population": 324459463
},
{
"name": "Russia",
"flag": "f/f3/Flag_of_Russia.svg",
"area": 17075200,
"population": 146989754
},
{
"name": "Germany",
"flag": "b/ba/Flag_of_Germany.svg",
"area": 357114,
"population": 82114224
},
{
"name": "Canada",
"flag": "c/cf/Flag_of_Canada.svg",
"area": 9976140,
"population": 36624199
},
{
"name": "Vietnam",
"flag": "2/21/Flag_of_Vietnam.svg",
"area": 331212,
"population": 95540800
},
{
"name": "Mexico",
"flag": "f/fc/Flag_of_Mexico.svg",
"area": 1964375,
"population": 129163276
}
]
Import HttpClientModule in app.module.ts
For dummy data to retrieve from API or static local JSON file we need to import HttpClientModule in the app.module.ts file
...
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
....
HttpClientModule
],
declarations: [HomePage]
})
export class HomePageModule { }
We need to retrieve our dummy data and let’s edit the home.page.ts file.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
countries: any;
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.http.get('./assets/data/countries.json').subscribe((data: any) => {
this.countries = data;
});
}
}
In the home.page.html template, we have to loop through the country’s array. Edit home template.
<ion-content color="light">
<ion-list class="ios list-ios hydrated" inset>
<ion-list-header class="ios hydrated">
Country with area and population census
</ion-list-header>
<ion-item *ngFor="let country of countries">
<ion-thumbnail slot="start" class="ios hydrated">
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/' + country.flag">
</ion-thumbnail>
<ion-label>
<h2>{{ country.name }}</h2>
<h3>Population: {{ country.population }}</h3>
<p>Area: {{ country.area }}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
Ionic list with Ionic Avatars
Ionic avatars component create circular images. They are typically used to display users’ profile images. Ionic avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
<ion-list>
<ion-item>
<ion-avatar item-left>
<img src="http://placehold.it/60?text=A">
</ion-avatar>
Arjun
</ion-item>
<ion-item>
<ion-avatar slot="start">
<img src="http://placehold.it/60?text=B">
</ion-avatar>
<ion-label>Item Avatar slot start</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="end">
<img src="http://placehold.it/60?text=C">
</ion-avatar>
Item Avatar slot end
</ion-item>
</ion-list>
<ion-chip>
<ion-avatar>
<img src="http://placehold.it/60?text=E">
</ion-avatar>
<ion-label>Chip Avatar</ion-label>
</ion-chip>
Ionic list with Thumbnails
Ionic thumbnails are rectangular images larger than avatars and they usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.
<ion-list>
<ion-item>
<ion-thumbnail slot="start">
<img src="http://placehold.it/100x60?text=F1">
</ion-thumbnail>
<ion-label>Apple</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="end">
<img src="http://placehold.it/100x60?text=F2">
</ion-thumbnail>
<ion-label>Banana</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail>
<img src="http://placehold.it/100x60?text=F3">
</ion-thumbnail>
<ion-label>Orange</ion-label>
</ion-item>
</ion-list>
Ionic Icons list
Ionic has lots of built icons that are ready to use and we can be displayed them using the component ion-icon with the name of the icon. Here is the site of the Ionic icon list check the site for what icon you want to use in your project. https://ionic.io/ionicons.
These icons are premium and designed for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open-source, MIT licensed, and built by Ionic.
<!-- Icons -->
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
We can use ionic icons in buttons, items, lists, and more. Here we have demonstrated the ionic icon in the list with its size property.
<ion-list>
<ion-item>
<ion-icon name="settings"></ion-icon>
</ion-item>
<ion-item>
<ion-icon name="log-out"></ion-icon>
</ion-item>
<ion-item>
<ion-icon name="alarm" size="small"></ion-icon>
</ion-item>
<ion-item>
<ion-icon name="alarm" size="large"></ion-icon>
</ion-item>
</ion-list>
ion-note : Notes are text elements generally used as subtitles that provide more information.
<!-- Default Note -->
<ion-note>Default Note</ion-note>
<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
Grouping of Items in ionic list
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.
The listing below is an example of the simple contacts list and another example we have used ion-item-sliding to drag an item to display a button or content associated with an item. 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-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic 5 - item group
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="ion-padding">
<ion-item-group>
<ion-item-divider>
<ion-label>A</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Alexa</ion-label>
</ion-item>
<ion-item>
<ion-label>Amber</ion-label>
</ion-item>
</ion-item-group>
<!-- They can also be used to group sliding items -->
<ion-item-group>
<ion-item-divider>
<ion-label>
Asia Country Game
</ion-label>
</ion-item-divider>
<ion-item-sliding>
<ion-item>
<ion-label>
<h3>India</h3>
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>
Cricket
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item>
<ion-label>
<h3>Japan</h3>
</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>
FootBall
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-content>
<ion-content [fullscreen]="true" class="ion-padding">
<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Employee record</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option (click)="favorite()">Favorite</ion-item-option>
<ion-item-option color="danger" (click)="share()">Share</ion-item-option>
</ion-item-options>
<ion-item-options side="end">
<ion-item-option (click)="unread()">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
ionic collapsible list
We can have an ionic collapsible list by using the *ngIf directive and clicking event. Below the screenshot, we have the Ionic collapsible list. We have used the ionic toggle component to toggle isCollapsed to true or false. If isCollapsed is true then we hide the list and show the list when isCollapsed is false.
We have used the toggle component, you can use an ionic item with an icon to change the value of isCollapsed. First, we need to define our isCollapsed initial value in our component typescript.
isCollapsed = false;
Now in our component template add the following ngIf condition and list to enable an ionic collapsible list.
<ion-list>
<ion-list-header color="warning">
<ion-label>Framwork heading collabsable</ion-label>
<ion-toggle (click)="isCollapsed == false ? isCollapsed = true : isCollapsed = false"></ion-toggle>
</ion-list-header>
<div *ngIf="!isCollapsed">
<ion-item>Ionic</ion-item>
<ion-item>Vue</ion-item>
<ion-item>Flutter</ion-item>
<ion-item>Angular</ion-item>
</div>
</ion-list>
Ionic list properties
The list provides us a few properties to configure, like list item with the line, no line, margin and rounded the corner. Here we have listed a list of properties.
Attribute | Description | Value |
---|---|---|
inset | If true, the list will have margin around it and rounded corners. | Boolean | Default false |
lines | How the bottom border should be displayed on all items. | full | inset | none | undefined |
mode | The mode determines which platform styles to use. | ios | md |
Conclusion
We can explore the ionic lists with different examples. The ionic list can have multiple rows of Ionic items and we can include text, video, images, and other content inside the ionic items.
Related posts
- How to implement an ionic slider
- Complete guide on an ionic grid with an example
- How to implement an ionic alert controller.
- How to implement an ionic table with pagination.
- How to use ionic skeleton component.
- How to implement ionic card component.