8、列表：ion-list

1、基本樣式

no-lines 屬性 隱藏列表項之間的分割符

inset 屬性 去掉 ion-list的 外邊框。

默認 的 ion-list 是有外邊框的。

 

/* ---示例代碼----*/
 
<ion-content>
 
  <ion-list no-lines>
    <ion-item>no-lines</ion-item>
    <ion-item>no-lines</ion-item>
    <ion-item>no-lines</ion-item>
  </ion-list>
 
  <ion-list>
    <ion-item>default</ion-item>
    <ion-item>default</ion-item>
    <ion-item>default</ion-item>
  </ion-list>
 
  <ion-list inset>
    <ion-item>inset</ion-item>
    <ion-item>inset</ion-item>
    <ion-item>inset</ion-item>
  </ion-list>
 
</ion-content>
 
/* ---示例代碼----*/

2、電話簿樣式

當要把 列表進行分組的時候 請使用 <ion-item-group> 而不是 <ion-list> 。 使用 <ion-item-group> 來划分多個部分。 他如同一個電話簿。

 

/* ---示例代碼----*/
 
<ion-content>
 
  <ion-item-group>
 
    <ion-item-divider light>A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
 
    <ion-item-divider light>B</ion-item-divider>
    <ion-item>Beijing</ion-item>
 
  </ion-item-group>
 
</ion-content>
 
/* ---示例代碼----*/

3、列表的頭部

每一個列表都可以帶有一個 列表的頭部用來顯示信息。他就是 <ion-list-header>

/* ---示例代碼----*/
 
<ion-content>
 
  <ion-list>
    <ion-list-header>
      Action
    </ion-list-header>
    <ion-item>Terminator II</ion-item>
    <ion-item>The Empire Strikes Back</ion-item>
    <ion-item>Blade Runner</ion-item>
  </ion-list>
 
</ion-content>
 
/* ---示例代碼----*/

4、圖標 ion-item

圖標的位置 可以用 item-left 和 item-right 進行控制。

 

/* ---示例代碼----*/
 
<ion-list>
   
  <ion-item>
    <ion-icon name="leaf" item-left></ion-icon>
    Herbology
    <ion-icon name="rose" item-right></ion-icon>
  </ion-item>
 
</ion-list>
 
/* ---示例代碼----*/

 

 

5、縮略圖

項目縮略圖展示圖像占用一個項目的整個高度。要使用一個縮略圖，在項目中添加一個  < ion-thumbnail > 組件。使用該項目的  item-left、 item-right 屬性設置縮略圖的位置：

/* ---示例代碼----*/
 
<ion-list>
   
  <ion-item>
    <ion-thumbnail item-left>
      <img src="img/1.jpg">
    </ion-thumbnail>
    <h2>My Neighbor Totoro</h2>
    <p>Hayao Miyazaki • 1988</p>
    <button clear item-right>View</button>
  </ion-item>
 
</ion-list>
 
/* ---示例代碼----*/

6、頭像

ion-avatar 比圖標大 。比縮略圖小 所以適合做頭像 。當多個標題或段落標記被添加到<ion-item>時，該 item 將自動調整其高度以適應新的行。

/* ---示例代碼----*/
 
<ion-list>
 
  <ion-item>
    <ion-avatar item-left>
      <img src="img/1.jpg">
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
 
</ion-list>
 
/* ---示例代碼----*/

7、滑動項目 ion-item-sliding 

ion-item-sliding 包含着整個 ion-item 按鈕則在他的子集 ion-item-options 中配置。

/* ---示例代碼----*/
 
<ion-list>
   
  <ion-item-sliding>
    <ion-item>
      <ion-avatar item-left>
        <img src="img/1.jpg">
      </ion-avatar>
      <h2>Slimer</h2>
    </ion-item>
    <ion-item-options>
      <button primary>
        <ion-icon name="text"></ion-icon>
        Text
      </button>
      <button secondary>
        <ion-icon name="call"></ion-icon>
        Call
      </button>
    </ion-item-options>
  </ion-item-sliding>
   
</ion-list>
 
/* ---示例代碼----*/