Angular Material 列表

<Mat-list> 是一个 angular 指令，用于创建用于承载和格式化各种对象的容器。<Mat-list> 是一个容器组件，它包装了行项目。它提供了 material design 样式，但没有行为。

Angular Content 是一个由 Angular 开发的 UI 组件库，用于为移动或桌面应用程序构建设计组件。 在命令提示符中输入命令并下载它。<mat-list> 标签用于显示对象或记录的列表。

语法

安装步骤

• 使用上面提到的命令安装 Angular Material。
• 安装后，从 '@angular/material/list' 的 module.ts 文件中导入 'MatListModule'。
• 导入 'MatListModule' 后，我们需要使用 <mat-list> 标签。
• 在 <mat-list> 标签内，我们需要为每个项目或标签使用 <mat-list-item> 标签。
• 我们需要为 <mat-list> 标签和 <mat-list-item> 都包含属性。
• 对于 <mat-list>，我们将 role 属性分配为 "list" 字符串，对于 <mat-list-item>，我们必须将 role 属性分配为 "listitem" 字符串值。
• 完成这些步骤后，启动项目。

简单列表

<mat-list> 元素包含许多 <mat-list-item> 元素。

导航列表

将 mat-nav-list 标签用于导航列表（即，具有锚标签的列表）。

对于更复杂的导航列表（每个项目有多个目标），将锚元素包装在 <mat-list-item> 中。

操作列表

当列表中的每个项目执行某些操作时，使用 <mat-action-list> 元素。列表中的每个项目都是 <button> 元素。

简单的操作列表将对按钮标签元素使用 mat-list-item 属性

选择列表

它提供了一个用于选择值的界面，其中每个列表项都是一个选项。

app.component.html

app.component.ts

输出

已选选项：0

选择列表选项可能没有进一步的交互式控件，例如按钮和锚点。

多行列表

需要每项多行的列表，使用 matlin 属性注释每一行。

带有图标的列表

使用 matListIcon 属性为列表项添加图标。

带有头像的列表

添加带有 matListAvatar 属性的图像标签以包含头像图像。

密集列表

要启用密集列表模式，请添加 dense 属性 mat-list 标签。

具有多个部分的列表

子标题将通过带有 matSubheader 属性的标题标签添加到列表中。使用 <mat-divider> 添加分隔符。

可访问性

在任何情况下使用的列表类型取决于与其交互的最终用户。

导航

当列表项导航到某处时，应使用 <mat-nav-list> 作为带有元素 <mat-list-item> 的列表项。neo-list 将使用 role = "navigation" 呈现，并且可以为其提供 area-label 以引用所呈现的导航选项集。 不要在锚点内添加其他交互式内容，例如按钮。

示例 1

以下是修改后的模块描述符 app.module.ts 的内容。

以下是修改后的 HTML 主机文件 app.component.html 的内容。

输出

说明

以前，我们使用 mat-list 创建了列表。 然后，我们使用 mat-list-item 添加了内容。

示例 2

app.module.ts

app.component.html

输出

示例 3

app.component.html

app.module.ts

输出