ionic4學習筆記8--UI組件2列表（沒有實踐，直接摘抄）

1、 普通列表

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

如果普通列表加上路由跳轉的話列表將會自動加上箭頭。

2、 分組列表 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、 列表中帶圖標

<ion-list>
<ion-item>
<ion-icon slot="start" name="people"></ion-icon>
<ion-label>個人中心</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>錢包</ion-label>
<ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-item>
</ion-list>

4、 列表中的頭像

<ion-list>
<ion-item>
<ion-avatar>
<img src="assets/01.png">
</ion-avatar>
<ion-label>沃爾瑪無人收銀系統</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、 列表中的圖片 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、 滑動列表

滑動列表就是在對應的列表上面滑動可以出現對應的按鈕

<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 的屬性