Ionic 列表

列表是任何 Web 或移动应用程序中最常用的元素。 它们由多行项目组成，其中包括文本、按钮、切换开关、图标、缩略图等等。 我们可以使用它来显示各种信息，例如菜单、选项卡，或者打破纯文本文件的单调性。

Ionic 列表通常包含具有相似数据内容的项目，例如图像和文本。 它支持多种交互，包括滑动项目、拖动以重新排序列表中的项目以及删除项目。 我们可以使用标准的 <ion-list></ion-list> 元素访问列表。

创建列表

我们可以使用以下语法创建列表。

Ionic 框架提供了不同类型的列表，如下所示。

• 列表标题
• 嵌入列表
• 图标列表
• 列表分隔符
• 头像列表
• 缩略图列表
• 滑动列表
• 多行列表

列表标题

每个列表都可以在列表顶部包含一个标题。 我们可以使用 <ion-list-header> 元素包含列表标题。

嵌入列表

默认情况下，Ionic 列表不包含外部边距。 当您需要列表填充自己的容器时，您可以将 inset 属性添加到 <ion-list> 组件。 inset 属性会为其添加一些边距，并将列表大小调整为您的容器。

示例

在下面的示例中，我们可以了解 <list header> 和 inset 如何与 <ion-list> 元素一起使用。

输出

列表图标

向列表添加图标可提供有关每个项目内容的提示。 我们还可以设置图标的大小，小或大。 默认情况下，图标的大小很小，但可以使用 large 属性使其更大。 最后，还有 <ion-note> 元素，它是一个用作字幕的文本元素，提供更多信息。 它在项目中用作元数据文本。

示例

输出

项目分隔符

列表分隔符用于将元素组织成逻辑组。 Ionic 为我们提供了 <ion-item-divider> 元素，用于分隔列表中的项目。 它们类似于列表标题，但无需将其放置在列表顶部。 它应该放在相似项目组之间。

示例

输出

项目头像和缩略图

头像和缩略图都用于添加图像。 主要区别在于，头像图像比图标大，但比缩略图小。

头像通常是一个圆形组件，用于包装图像或图标。 它可以用来表示一个人或一个对象。 我们可以通过在项目内部使用 <ion-avatar> 组件来添加头像。 如果我们将头像放在 <ion-item> 内部，它将调整大小以适合父组件。 我们可以通过将 slot 设置为 start 或 end 来定位头像，使其位于项目的左侧或右侧。

缩略图通常是一个正方形组件，用于包装图像或图标。 它可以用于显示一组较大的图像或提供全尺寸图像的预览。 我们可以通过在项目内部使用 <ion-thumbnail> 组件来添加缩略图。 如果我们将缩略图放在 <ion-item> 内部，它将调整大小以适合父组件。 我们可以通过将 slot 设置为 start 或 end 来定位缩略图，使其位于项目的左侧或右侧。

示例

输出

滑动列表

滑动项目包含一个可以向左或向右滑动的项目，以显示一组隐藏的按钮。 我们可以通过在 <ion-list> 组件内部添加 <ion-item-sliding> 组件来使用滑动项目。 接下来，我们需要在滑动项目内部添加 <ion-item-options> 组件以包含按钮。

滑动方向： 默认情况下，按钮位于右侧（末尾）。 这意味着当滑动项目从右向左（从结束到开始）滑动时，选项会显示出来。 如果您需要从左向右（从开始到结束）滑动选项，请在 <ion-item-options> 元素上将 side 属性设置为 "start"。

示例

让我们看看 item-sliding 如何与 Ionic 列表一起使用，以下面的示例为例。 此示例包含两个项目，分别是 Sliding Item 1 和 Sliding Item 2。 第一个项目从右向左滑动，第二个项目从左向右滑动。

输出

当您执行上面的 Ionic 应用程序时，它将给出以下输出。

接下来，将滑动项目 1 从右向左滑动。 以下输出会出现在您的浏览器中。