Angular Material - 按钮

Angular 指令 <mat-button> 用于创建带有内容样式和动画的按钮。 Angular 内容按钮是原生 <button> 或使用样式和墨水涟漪增强的元素。

原生 <button> 和 <a> 元素用于为用户提供可访问的体验。 当执行任何*操作*时，使用 <button> 元素。 当用户将*导航*到另一个视图时，将使用 <a> 元素。

有许多按钮变体，每个都作为属性应用

主题化

也可以使用颜色属性根据当前主题对按钮进行着色，将背景颜色设置为 primary、accent 或 warn。

大写

按钮文本必须大写。 但是，我们选择不通过 text-transform: uppercase 自动大写按钮，因为它会导致某些语言环境出现问题。

可访问性

Angular 内容默认使用原始的 <button> 和 <diagram> 元素来确保可访问的体验。 <button> 元素用于对当前页面执行任何交互。 <a> 元素必须用于导航到任何其他视图的任何交互。

只有带有图标的按钮或链接（例如 mat-fab, mat-mini-fab, 和 mat-icon-buttons）应该通过 area-label 获得有意义的标签。

我们应该按照下面给出的步骤来更新在 Angular 内容中创建的 Angular 应用程序

步骤 1： 创建一个名为 Content App 的项目。

步骤 2： 如下所示修改 app.module.ts, app.component.ts, app.component.css, 和 app.component.html。 保持其余文件不变。

步骤 3： 编译并运行应用程序以验证适用逻辑的结果。

让我们按照这些步骤并创建不同类型的按钮。

app.component.html

app.module.ts

app.component.css

输出

让我们创建另一个模块来创建按钮。

app.module.ts

app.component.css

app.component.html

输出