Ionic列表

列表 是任何Web或移动应用程序中最受欢迎的元素之一。它们通常用于显示各种信息。它们可以与其他HTML元素组合以创建不同的菜单，选项卡或打破纯文本文件的单调。Ionic框架提供了不同的列表类型，使其易于使用。

创建Ionic列表

每个列表都使用两个元素创建。如果要创建基本列表， <ul> 标记需要分配 列表类， <li> 标记将使用项目类。另一个有趣的事情是你甚至不需要为你的列表使用 <ul>， <ol> 和 <li> 标签。您可以使用任何其他元素，但重要的是适当地添加列表和 项 类。

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

上面的代码将生成以下屏幕

Ionic列表

插入列表

当您需要一个列表来填充您自己的容器时，您可以在列表 类之后添加 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列表插图

物品分隔物

分隔符用于将一些元素组织成逻辑组。Ionic 为此提供了 item-divider 类。同样，像所有其他的Ionic元素，我们只需要添加的 项目分频器 后类 项目 类。项目分隔符可用作列表标题，因为默认情况下它们具有比其他列表项更强的样式。

<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>

上面的代码将生成以下屏幕 -

Ionic项目分隔线

添加图标

我们已经向您展示了如何在按钮上添加图标。向列表项添加图标时，您需要选择要放置它们的一侧。这里有 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>

上面的代码将生成以下屏幕 -

Ionic项目图标

添加头像和缩略图

头像和缩略图是相似的。主要区别在于头像小于缩略图。这些缩略图覆盖了列表项的大部分高度，而化身则是中等大小的圆形图像。使用的类是 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>

上面的代码将生成以下屏幕

Ionic头像缩略图