LIST & CARDS IN IONIC

Share the post

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.

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 :

Ionic_List_Output
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 :

Ionic_Card_Output
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.

Leave a Comment