Angular Material 7 – 徽章

随着页面设计的发展，徽章（Badge）已经成为了页面常用的一个组件。徽章通常会被用于提醒用户或者展示一个计数器或者标签信息等。当然，很多的UI框架都提供了徽章组件，而Angular Material也不例外， 本文就将向大家介绍如何使用Angular Material 7实现一个漂亮的徽章效果。

准备工作

在开始操作之前，需要先安装Angular CLI。如果未安装，可以通过以下命令进行安装：

npm install -g @angular/cli

接下来需要安装Angular Material。在命令行中运行以下命令：

ng add @angular/material

这个命令会提示你安装Angular Material的默认主题。如果你想替换主题，可以更改相关配置。

Angular Material 徽章组件

Angular Material通过mat-badge指令实现徽章组件的功能。下面我们将为大家展示如何使用Angular Material徽章组件来创建漂亮的徽章。

徽章的基本用法

下面的代码展示了徽章最基本的用法。

<span matBadge="5" matBadgeSize="small" matBadgeColor="accent"></span>

这段代码将展示一个大小为“小”（small）的徽章，徽章的颜色为“强调色”（accent），图标上面的数字为“5”。

不同形状的徽章

Angular Material 7提供了两种不同形状的徽章：圆形（matBadgeOverlap="false"）和矩形（默认情况下）。

<span matBadge="3" matBadgePosition="above before" matBadgeSize="medium" matBadgeColor="primary" matBadgeOverlap="false"></span>

上述代码展示了一个位置为“上方前面”的、大小为“中”的、颜色为“默认主题色”的、圆形的徽章。

在按钮上展示徽章

下面的代码展示了如何在按钮上展示徽章。

<button mat-icon-button [matBadge]="count" matBadgePosition="above after" matBadgeColor="accent">
  <mat-icon>inbox</mat-icon>
</button>

这个例子中的徽章展示在了Inbox图标的旁边。当用户接收到新消息时，值会自动增加，并在徽章中显示。

高级用法

Angular Material 7的徽章组件提供了许多针对不同需求的属性，以及细致精美的动画效果。下面的代码展示了高级用法中的一部分，更多详细请参阅官方文档。

<span matBadge="Hello, world!" matBadgePosition="after center" matBadgeColor="warn" matBadgeSize="large"
  matBadgeOverlap="true" matBadgeHidden="false" matBadgeDisabled="false" matBadgeDescription="Test Badge"
  matBadgeAnimation="true">
</span>

这里展示了一个“红色的、带有描述文字（Test Badge）的、大型的、有动画效果”的徽章。

结论

Angular Material 7的徽章组件是一个简单但功能强大的组件。无论您的页面是什么类型的，徽章组件能够快速方便地帮助您实现各种不同的需求。希望本文能够对您有所帮助，让您更好地使用Angular Material 7。