Angular Material 分隔符/内容

<Mat-divider> 是 Angular Material 指令，允许我们使用不同的方向选项来设置行分隔符内容的样式。它用于创建具有内容设计样式和动画功能的分隔符。它在两个对象之间提供分隔符。

简单分隔符

可以使用 <matte-divider> 元素创建一条带有内容的水平或垂直线。

内嵌分隔符

我们添加 inset 属性以确定分隔符是否为内嵌分隔符。

垂直分隔符

添加 vertical 属性以设置分隔符是否为垂直方向。

带有内嵌分隔符的列表

可以将分隔符添加到列表中，将内容分隔成不同的类。还可以添加内嵌分隔符，以在列表中提供独立元素的存在，而不会混乱内容，例如头像图片或图标。

示例 1

按照以下步骤更新我们在 Angular 中创建的 Angular 应用程序

• 创建一个名为materialApp的项目
• 添加module.ts，app.component.ts，app.component.css 和 app.component.html，如下所示。
• 编译代码以验证结果。

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

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

输出

说明

• 之前，我们使用 mat-list 创建了一个列表。
• 然后，我们通过使用 mat-divider 在列表项之间添加了分隔符。

示例 2

app.component.html

app.component.ts

输出

Angular Material 内容

Angular 指令 <md-content> 是一个用于可滚动内容的容器元素。layout-padding 功能被添加到填充材料中。

下面的示例还展示了 md-content 指令的用法以及 angular 内容显示的用法。

am_content.htm

输出