Ionic4 learning notes 8 -- UI component 2 list (no practice, direct excerpt)

1、 Normal list

<ion-list>
<ion-item>
<ion-label>Peperoni</ion-label>
</ion-item>
<ion-item>
<ion-label>Hawaii</ion-label>
</ion-item>
</ion-list>

If the normal list is added with route jump, the list will automatically add arrows .

2、 Group list ion-item-divider
 

<ion-list>
<ion-item-divider>
<ion-label>
Section A
</ion-label>
</ion-item-divider>
<ion-item><ion-label>A1</ion-label></ion-item>
<ion-item><ion-label>A2</ion-label></ion-item>
<ion-item><ion-label>A3</ion-label></ion-item>
<ion-item-divider>
<ion-label>
Section B
</ion-label>
</ion-item-divider>
<ion-item><ion-label>B1</ion-label></ion-item>
<ion-item><ion-label>B2</ion-label></ion-item>
<ion-item><ion-label>B3</ion-label></ion-item>
</ion-list>

3、 There are icons in the list

<ion-list>
<ion-item>
<ion-icon slot="start" name="people"></ion-icon>
<ion-label> Personal center </ion-label>
<ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-item>
<ion-item>
<ion-icon slot="start" name="wallet" color="success"></ion-icon>
<ion-label> wallet </ion-label>
<ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-item>
</ion-list>

4、 Avatars in the list

<ion-list>
<ion-item>
<ion-avatar>
<img src="assets/01.png">
</ion-avatar>
<ion-label> Wal Mart unattended cashier system </ion-label>
</ion-item>
<ion-item>
<ion-avatar>
<img src="assets/02.png">
</ion-avatar>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-avatar>
<img src="assets/03.png">
</ion-avatar>
<ion-label>haha </ion-label>
</ion-item>
</ion-list>

5、 Pictures in the list ion-thumbnail

<ion-list>
<ion-item>
<ion-thumbnail slot="start">
<img
src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-thumbnail>
<ion-label>Peperoni</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="assets/03.png">
</ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="end">
<img src="assets/01.png">
</ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="end">
<img src="assets/02.png">
</ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="end">
<img src="assets/03.png">
</ion-thumbnail>
<ion-label>Hawaii</ion-label>
</ion-item>
</ion-list>

6、 Slide list

Sliding list is to slide on the corresponding list to display the corresponding button

<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Item1</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option (click)="favorite(item)">Favorite</ion-item-option>
<ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
</ion-item-options>
<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>Item2</ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option color="success">Favorite</ion-item-option>
<ion-item-option color="primary" (click)="share(item)">Share</ion-item-option>
</ion-item-options>
<ion-item-options side="end">
<ion-item-option color="success">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>

7、 ion-item Properties of