基本列表项语法

几乎每个应用程序都有某种列表。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>