列表

列表用于显示信息行，例如联系人列表，播放列表或菜单。或者也许有些疯狂，我们甚至不知道是否存在！

有关更多信息，请查看List API文档和Item API文档。

基础使用

默认情况下，所有列表将使用分隔线进行样式：

<ion-list>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button>  
</ion-list>

效果：

没有分割线

添加no-lines属性将在列表项之间隐藏分隔符：

<ion-list no-lines>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button> 
</ion-list>

效果：

插入列表

默认情况下，列表没有外部边距。要添加一个，将inset属性添加到ion-list组件。

<ion-list inset>
  <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button> 
</ion-list>

效果：

列表分隔符

要划分内容，请使用<ion-item-group>而不是<ion-list>。使用<ion-item-divider>组件将组划分为多个部分：

<ion-content>
  <ion-item-group>
    <ion-item-divider color="light">A</ion-item-divider>
    <ion-item>Angola</ion-item>
    <ion-item>Argentina</ion-item>
  </ion-item-group>
</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-list>
  <ion-item>
    <ion-icon name="leaf" item-left></ion-icon>
      Herbology
    <ion-icon name="rose" item-right></ion-icon>
  </ion-item>
</ion-list>

效果：

头像列表

物品头像展示的图像大于图标，但小于缩略图。要使用头像，请在项目中添加一个<ion-avatar>组件。头像的位置可以使用item-left和item-right属性设置：

<ion-list>
  <ion-item>
    <ion-avatar item-left>
      <img src="img/avatar-cher.png">
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
</ion-list>

效果：

多行列表

多行列表与常规列表相同，但项目具有多行文本。当<ion-item>组件包含多个标题或段落元素时，它将自动扩展其高度以适应新的文本行。以下是三行文字的示例：

<ion-list>
  <ion-item>
    <ion-avatar item-left>
      <img src="img/avatar-finn.png">
    </ion-avatar>
    <h2>Finn</h2>
    <h3>Don't Know What To Do!</h3>
    <p>I've had a pretty messed up day. If we just...</p>
  </ion-item>
</ion-list>

效果：

滑动列表

滑动物品可以向左或向右滑动，以显示一组隐藏的按钮。要使用滑动项目，请在 ion-list 组件中添加 ion-item-sliding 组件。接下来，在滑动项目中添加一个<ion-item-options>组件以包含按钮。

有关更多信息，请查看API文档。

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-avatar item-left>
        <img src="img/slimer.png">
      </ion-avatar>
      <h2>Slimer</h2>
    </ion-item>
    <ion-item-options side="left">
      <button ion-button color="primary">
        <ion-icon name="text"></ion-icon>
        Text
      </button>
      <button ion-button color="secondary">
        <ion-icon name="call"></ion-icon>
        Call
      </button>
    </ion-item-options>
    <ion-item-options side="right">
      <button ion-button color="primary">
        <ion-icon name="mail"></ion-icon>
        Email
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

效果：

缩略图列表

项目缩略图显示占用物品整个高度的图像。要使用缩略图，请在项目中添加<ion-thumbnail>组件。缩略图的位置可以使用item-left和item-right属性进行设置：

<ion-list>
  <ion-item>
    <ion-thumbnail item-left>
      <img src="img/thumbnail-totoro.png">
    </ion-thumbnail>
    <h2>My Neighbor Totoro</h2>
    <p>Hayao Miyazaki • 1988</p>
    <button ion-button clear item-right>View</button>
  </ion-item>
</ion-list>

效果：

列表（Lists）

列表