基本列表項語法

幾乎每個應用程式都有某種列表。Ionic 擁有自己的內建隨時可用的列表項 CSS 宣告，可以輕鬆地在應用程式中執行列表。你可以使用 HTML 元素併為其宣告一個類，也可以使用指令 ion-list 來建立它們。指令的示例位於底部。

基本列表項 CSS 語法：

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

帶分隔符的列表：

<div class="list">
  <a class="item" href="#">
    List item
  </a>
  <div class="item item-divider">
    Divider that looks a bit different from items
  </div>
  <a class="item" href="#">
    Another list item
  </a>
</div>

列出帶有圖示的專案：

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left
  </a>
</div>

你還可以使用以下語法在專案的兩側設定圖示：

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left and a briefcase icon on the right
    <i class="icon ion-briefcase"></i>
  </a>
</div>

可以建立帶有按鈕或按鈕的列表項，如下所示：

<div class="list">
  <div class="item item-button-right">
    Item with a button on the right that has a clock icon in it
    <button class="button button-positive">
      <i class="icon ion-clock"></i>
    </button>
  </div>
</div>

也可以使用頭像，縮圖和插圖建立列表項，這將在列表項周圍建立填充。Ionic 還通過相應於列表項設定填充來處理列表項中的設定圖示等。

Ionic 也有自己的核取方塊，單選按鈕等指令。下面是一個帶 Ionic 的核取方塊列表示例。

<ion-list>
  <ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
  <ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>