ionic 列表

清單是一個廣泛應用的介面元素，在所有行動app中幾乎都會使用。

清單可以是基本文字、按鈕，開關，圖示和縮圖等。

清單項目可以是任何的HTML元素。容器元素需要list類，每個列表項需要使用item類。

ionList和ionItem可以很容易的支援各種互動方式，例如，滑動編輯，拖曳排序，以及刪除項目。

基本用法:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

清單分隔符號

我們可以使用item-divider 類別來為清單建立分隔符，預設情況下，列表項目以不同的背景顏色和字體加粗來區分，但你也可以很容易的定制他。

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

帶圖示清單

我們可以在清單項目的左側或右側指定圖示。

使用 item-icon-left 圖示在左側， item-icon-right 設定圖示在右側。如果你需要在兩邊都有圖標，則兩個類別都添加上即可。

以下實例中，我們在清單項目中使用了 <a> 標籤，使得每個清單項目可點擊。

清單項目在使用 <a>或<button> 元素時，如果右側未新增圖標，則會自動新增上箭頭號。

實例中，第一項只有左側圖標，第二項左右都有圖標，第三項有右側圖標（還有註釋item-note），第四項有badge（標記）元素。

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>

按鈕清單

使用 item-button-right 或 item-button-left 類別將按鈕放在清單項目中。

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>

帶領頭像清單

使用item-avatar 來建立一個有頭像的清單：

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="../style/images/venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </a>

    ...

</div>

#縮圖清單

item-thumbnail-left 類別用於新增左側對齊的縮圖，item-thumbnail-right 類別用於新增右側對齊的縮圖。

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="../style/images/cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

內嵌列表(inset list)

我們可以在容器當中內嵌列表，列表不會顯示完整的寬度。

內嵌清單的樣式為：list list-inset，與常規清單差異是，它設定了外邊距（marign）,類似於選項卡。

內嵌清單是沒有陰影效果的，捲動時效果會更好。

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>