Ionic - 列表

列表是任何 Web 或移动应用程序中最受欢迎的元素之一。它们通常用于显示各种信息。它们可以与其他 HTML 元素结合起来创建不同的菜单、选项卡或打破纯文本文件的单调。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>

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

离子列表

插图列表

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

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

离子头像缩略图