Hello All, In this topic we will discuss about <ion-list> & <ion-card>. The list in Ionic can be shown by <ion-list> tag & card can be shown by <ion-card>. Later, we will see the example of implementation ionic 4 lists & cards. We will also see what are the different things which we can include inside the list & card so that our list items & card data look more attractive.
Table of Contents
Ionic List :
Ionic list can be displayed by using <ion-list></ion-list> tag. Please find below example for more details :
<ion-list>
<ion-item>
<ion-avatar slot="start">
<img src="../../assets/icon/favicon.png" />
</ion-avatar>
<ion-label>
<h2> Software Dev </h2>
<h3> Languages </h3>
<p> .net </p>
<p> java </p>
</ion-label>
</ion-item>
<ion-item-options>
</ion-item-options>
</ion-list>Output :
In the above example, We can add the different shapes of images by using different tags in ionic.
- <ion-avatar></ion-avatar> : for round image
- <ion-thumbnail></ion-thumbnail> : for square image
Also, we can able to add <h2>, <h3>, <p> , tags inside <ion-item> tag. You can add different item-option. Please see this link for more details.
Ionic Card :
The ionic card can be implemented by using a tag.
Please see below example for more details :
<ion-card>
<ion-card-header>
<ion-card-title>Title</ion-card-title>
<ion-card-subtitle>Subtitle</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
this is sample text.
</ion-card-content>
</ion-card> Output :
As seen in the above example ion-card-header is used for title & subtitle whereas an ion-card-content is used for the content of the card.