IONIC LIST

This note consists of the followings:

1) Create a common list
2) Create a list that has ion-avatar

list.page.html
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Common list</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
  <ion-item-divider color="secondary">
    <ion-label>
      List of Fav cartoons
    </ion-label>
  </ion-item-divider>
  <!-- List of Text Items -->
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>

<ion-item-divider color="secondary">
  <ion-label>
    Input Details
  </ion-label>
</ion-item-divider>
<!-- List of Input Items -->
  <ion-item>
    <ion-label>Name: </ion-label>
    <ion-input></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Gender</ion-label>
  </ion-item>
  <ion-radio-group value="gender">
      <ion-item>
        <ion-label>Male</ion-label>
        <ion-radio slot="start" value="male"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Female</ion-label>
        <ion-radio slot="start" value="female"></ion-radio>
      </ion-item>
  </ion-radio-group>
  <ion-item-divider color="secondary">
    <ion-label>
      Favourite Books
    </ion-label>
  </ion-item-divider>
  <!-- List of Sliding Items -->
  <ion-item-sliding>
    <ion-item>
      <ion-label>Alice in the wonderland</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Captain Peterpant</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>
</ion-content>
 listavatar.page.html

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>JCOM FSKIK UPSI</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header> Online </ion-list-header>

    <ion-item>
      <ion-avatar slot="start">
        <img src="../assets/friends/mas.jpg" />
      </ion-avatar>
      <ion-label>
        <h2>Mashitoh Hashim</h2>
        <h3>Assoc. Prof. Dr.</h3>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="../assets/friends/ramlah.jpg" />
      </ion-avatar>
      <ion-label>
        <h2>Ramlah Mailok</h2>
        <h3>Assoc. Prof. Dr.</h3>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="../assets/friends/syidi.jpg" />
      </ion-avatar>
      <ion-label>
        <h2>Rasyidi Johan</h2>
        <h3>Encik</h3>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="../assets/friends/cikdaa.jpg" />
      </ion-avatar>
      <ion-label>
        <h2>Noor Hidayah Che Leh</h2>
        <h3>Dr.</h3>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="../assets/friends/mai.webp" />
      </ion-avatar>
      <ion-label>
        <h2>Maizatul Hayati Mohd Yatim</h2>
        <h3>Assoc. Prof. Dr.</h3>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="../assets/friends/haslina.jpg" />
      </ion-avatar>
      <ion-label>
        <h2>Haslina Hassan</h2>
        <h3>Puan</h3>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img src="../assets/friends/aj.jpg" />
      </ion-avatar>
      <ion-label>
        <h2>Mohd Fadhil Harfiez</h2>
        <h3>Dr.</h3>
      </ion-label>
    </ion-item>

  </ion-list>
</ion-content>