Ionic 基本元素（ion-list）

• 【list-item】

<h3>&nbsp;&nbsp; list-item</h3>
  <ion-list lines="full">
    <ion-item *ngFor="let item of list; let i=index;" [routerLink]="['/maws']">
      <ion-label>=> {{item}} --- {{i+1}} </ion-label>
    </ion-item>
</ion-list>

•  【list-item-header】

 <h3>&nbsp;&nbsp;list-item-header</h3>
  <ion-list lines="full">
    <ion-list-header>
      <ion-label>標題信息</ion-label>
      <ion-button>更多</ion-button>
    </ion-list-header>
  </ion-list>

•  【tab1.page.ts】初始化默認添加數據方便上面html綁定展示；

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {

  public list:string[] = [];
  constructor() {}

  ngOnInit(){
    for (let index = 0; index < 3; index++) {
      this.list.push(`我是第${index +1}條數據`);
    }
  }

  favorite(){
    console.log("分享");
  }

  unread(){
    console.log("修改或刪除");
  }
}

• 【list-item-divider】

  <h3>&nbsp;&nbsp;list-item-divider</h3>
  <ion-list lines="full">
    <ion-item-divider>
      <ion-label>A組團</ion-label>
    </ion-item-divider>
    <ion-item>
      <ion-icon slot="start" name="add" color="primary" ></ion-icon>
      <ion-label>新增成員</ion-label>
    </ion-item>

    <ion-item-divider>
      <ion-label>B組團</ion-label>
    </ion-item-divider>
    <ion-item>
      <ion-icon slot="end" name="alarm-outline" color="danger" ></ion-icon>
      <ion-label>時鐘</ion-label>
    </ion-item>
    <ion-item>
      <ion-icon slot="end" name="calendar-outline" color="warning" ></ion-icon>
      <ion-label>日程</ion-label>
    </ion-item>
  </ion-list>

• 【list-item-avatar】

  <h3>&nbsp;&nbsp;list-item-avatar</h3>
  <ion-list lines="full">
    <ion-item>
      <ion-avatar slot="start">
        <img src="assets/icon/favicon.png" />
      </ion-avatar>
      <ion-label>圖標前置</ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="end">
        <img src="assets/icon/favicon.png" />
      </ion-avatar>
      <ion-label>圖標後置</ion-label>
    </ion-item>
  </ion-list>

• 【list-item-thumbnail】

  <h3>&nbsp;&nbsp;list-item-thumbnail</h3>
  <ion-list lines="full">
    <ion-item>
      <ion-thumbnail slot="end">
        <ion-img src="assets/logo/angular-404_wps.png"></ion-img>
      </ion-thumbnail>
      <ion-label>圖標後置, 新聞展示</ion-label>
    </ion-item>
  </ion-list>

• 【list-item-sliding】

  <h3>&nbsp;&nbsp;list-item-sliding</h3>
  <ion-list lines="full">
    <ion-item-sliding>
      <ion-item>
        <ion-label>左右滑動，顯示對應的=》操作</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option color="primary" (click)="favorite(item)">分享</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option color="primary" (click)="unread(item)">修改</ion-item-option>
        <ion-item-option color="warning" (click)="unread(item)">刪除</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

運行預覽：