Ionic列表

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

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

建立清单

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

<ion-content>
    <ion-list>
      <ion-item></ion-item>
      <ion-item></ion-item>
      </ion-list>
</ion-content>

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

• 列表标题
• 插图列表
• 图标列表
• 列表分隔线
• 头像列表
• 缩略图列表
• 滑动清单
• 多行清单

清单标题

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

插图列表

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

例

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

<ion-header>
    <ion-toolbar>
      <ion-title>
        Lists Example
      </ion-title>
    </ion-toolbar>
  </ion-header>   
  <ion-content color="light">
    <ion-list inset>
      <ion-list-header>Action Game</ion-list-header>
      <ion-item>Pok?mon Yellow</ion-item>
      <ion-item>Super Metroid</ion-item>
      <ion-item>Mega Man X</ion-item>
    </ion-list>
  </ion-content>

输出量

列表图标

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

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      Lists Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content color="light">
  <ion-list>
    <ion-item>
      <ion-icon name="star"></ion-icon>
    </ion-item>       
    <ion-item>
      <ion-icon name="home"></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="star" size="small"></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon name="home" size="large"></ion-icon>
    </ion-item>
    <!-- Notes in a List -->
    <ion-item>
      <ion-label>Note (End)</ion-label>
      <ion-note slot="end">On</ion-note>
    </ion-item>
    <ion-item>
      <ion-note slot="start">Off</ion-note>
      <ion-label>Note (Start)</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

输出量

物品分割器

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

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      Lists Divider
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content color="light">     
  <!-- Item Dividers in a List -->
    <ion-list>
      <ion-item-divider>
        <ion-label>Item Divider A</ion-label>
      </ion-item-divider>      
      <ion-item><ion-label>A1</ion-label></ion-item>
      <ion-item><ion-label>A2</ion-label></ion-item>
      <ion-item><ion-label>A3</ion-label></ion-item>
      
      <ion-item-divider>
        <ion-label>Item Divider B</ion-label>
      </ion-item-divider>
      <ion-item><ion-label>B1</ion-label></ion-item>
      <ion-item><ion-label>B2</ion-label></ion-item>
      <ion-item><ion-label>B3</ion-label></ion-item>
    </ion-list>
</ion-content>

输出量

项目头像和缩略图

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

阿凡达通常是包裹图像或图标的圆形组件。它可以用来代表一个人或物体。我们可以通过在项目内部使用<ion-avatar>组件来添加头像。如果将头像放在<ion-item>内, 则它将调整大小以适合父组件。我们可以通过将插槽分别设置为开始或结束来在头像的左侧或右侧放置头像。

缩略图通常是包裹图像或图标的正方形组件。它可用于显示一组较大的图像或提供全尺寸图像的预览。我们可以通过在项目内部使用<ion-thumbnail>组件来添加缩略图。如果我们将缩略图放在<ion-item>内, 则它将调整大小以适合父组件。通过将插槽分别设置为开始或结束, 我们可以将缩略图放置在项目的左侧或右侧。

例

<ion-header>
  <ion-toolbar>
    <ion-title>
      Avatar Thumbnail
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content color="light">     
  <!-- Avatar -->
    <ion-list>
      <ion-list-header>Avatar</ion-list-header>
      <ion-item>
        <ion-avatar slot="start">
          <img src="assets/thumnail1.png">
        </ion-avatar>
        <ion-label>Item Avatar</ion-label>
      </ion-item>
      <ion-list-header>Thumbnail</ion-list-header>
  <!-- Thumbnail -->
      <ion-item>
        <ion-thumbnail slot="start">
          <img src="assets/thumnail1.png">
        </ion-thumbnail>
        <ion-label>Item Thumbnail</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

输出量

滑动清单

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

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

例

在下面的示例中, 让我们看看项目滑动如何与Ionic列表一起使用。此示例包含两个项目, 分别是“滑动项目1”和“滑动项目2”。第一个项目从右向左滑动, 第二个项目从左向右滑动。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Sliding Example
    </ion-title>
  </ion-toolbar>
</ion-header>
   
<ion-content color="light">
  <div></div>
  <ion-list>   
    <!-- Sliding item with icon start options on end side -->
    <ion-item-sliding>
      <ion-item>
        <ion-label>Sliding Item 1</ion-label>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option (click)="test()">Unread</ion-item-option>
        <ion-item-option color="success" (click)="test()">Archive</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Sliding Item 2</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option (click)="test()">Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

输出量

当你执行上面的Ionic应用程序时, 它将提供以下输出。

接下来, 从右向左滑动滑动项1。以下输出出现在浏览器中。