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>

以上代码将生成以下屏幕：