Ionic 列表

列表是任何Web或移動應用程式中最受歡迎的元素之一。它們通常用於顯示各種資訊。它們可以與其他HTML元素組合以建立不同的選單、標籤或打破純文字檔案的單調性。Ionic框架提供不同的列表型別，使其易於使用。

建立Ionic列表

每個列表都由兩個元素建立。當您想要建立一個基本列表時，您的<ul>標籤需要分配list類，而您的<li>標籤將使用item類。另一件有趣的事情是，您甚至不需要為您的列表使用<ul>、<ol>和<li>標籤。您可以使用任何其他元素，但重要的是要適當地新增list和item類。

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

以上程式碼將生成以下螢幕：

內嵌列表

當您需要一個列表來填充您自己的容器時，您可以在list類之後新增list-insets。這將向其新增一些邊距，並且它將調整列表大小以適應您的容器。

<div class = "list list-inset">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

以上程式碼將生成以下螢幕：

專案分隔符

分隔符用於將某些元素組織成邏輯組。Ionic為此提供了item-divider類。再次，與所有其他Ionic元素一樣，我們只需要在item類之後新增item-divider類。專案分隔符用作列表標題很有用，因為預設情況下它們的樣式比其他列表項更強。

<div class = "list">
   <div class = "item item-divider">Item Divider 1</div>
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>

   <div class = "item item-divider">Item Divider 2</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
</div>

以上程式碼將生成以下螢幕：

新增圖示

我們已經向您展示瞭如何向按鈕新增圖示。向列表項新增圖示時，您需要選擇要放置圖示的一側。為此，有item-icon-left和item-icon-right類。如果您想在兩側都放置圖示，您也可以組合這兩個類。最後，還有一個item-note類可以為您的專案新增文字註釋。

<div class = "list">
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      Left side Icon
   </div>

   <div class = "item item-icon-right">
      <i class = "icon ion-star"></i>
      Right side Icon
   </div>

   <div class = "item item-icon-left item-icon-right">
      <i class = "icon ion-home"></i>
      <i class = "icon ion-star"></i>
      Both sides Icons
   </div>
   
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      <span class = "text-note">Text note</span>
   </div>
</div>

以上程式碼將生成以下螢幕：

新增頭像和縮圖

頭像和縮圖是相似的。主要區別在於頭像比縮圖小。這些縮圖覆蓋了列表項的大部分高度，而頭像則是中等大小的圓形影像。使用的類是item-avatar和item-thumbnail。您還可以選擇要放置頭像和縮圖的一側，如下面的縮圖程式碼示例所示。

<div class = "list">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h3>Avatar</h3>
   </div>

   <div class = "item item-thumbnail-left">
      <img src = "my-image.png">
      <h3>Thumbnail</h3>
   </div>
</div>

以上程式碼將生成以下螢幕：