Angular Material (MAT) 按钮

17 Mar 2025 | 阅读 2 分钟

什么是 MAT 按钮？

与普通按钮相比，<mat-button> 模块增强了用户体验。<mat-button> 元素始终用于为用户提供最直接和可访问的体验。当用户想要在网页中执行某个操作时，它会使用 <mat-button>。

Angular Material 中有几种类型的按钮，每种按钮都有自己的特色。

序号	按钮名称	描述
1.	mat-button	<mat-button> 是一个简单的文本按钮。通常，它用于不太重要的任务，例如“了解更多”、“关闭”和“好的”。
2.	mat-flat-button	<mat-flat-button> 是一个彩色按钮。此按钮用于网页中的主要操作。
3.	mat-raised-button	<mat-raised-button> 是一个彩色按钮。它的可见性比 <mat-flat-button> 更高。它可以用在 <mat-flat-button> 的位置。
4.	mat-stroked-button	<mat-stroked-button> 是一个带边框的按钮。此按钮周围有一个边框。通常，它用于比 <mat-button> 更重要的任务。
5.	mat-icon-button	<mat-icon-button> 是一个类似图标的按钮。
6.	mat-fab	<mat-fab> 是一个常规的浮动操作按钮，用于桌面上的重要操作。
7.	mat-mini-fab	<mat-mini-fab> 也类似于浮动操作按钮，但尺寸比 <mat-fab> 按钮小。

按钮的主题

可以使用 color 属性将背景色设置为 Primary、Pronunciation 或 Warning，以引用按钮的当前主题。

按钮文本大写

Material design 要求将光谱按钮文本大写，尽管我们没有选择通过 text-transformation:uppercase 自动大写按钮文本，因为这可能会在某些地方引起问题。

Angular Material 按钮的 API 参考

示例：所有按钮

TS 代码

import {Component} from '@angular/core';

/**
 * @title Button varieties
 */
@Component({
  selector: 'button-types-example',
  templateUrl: 'button-types-example.html',
  styleUrls: ['button-types-example.css'],
})
export class ButtonTypesExample {}

CSS 代码

.example-button-row button,
.example-button-row a {
  margin-right: 8px;
}

HTML 代码

<h3> Basic Button </h3>
<div class = " example " >
  <button mat-button> Basic </button>
</div>

<h3> Raised Button </h3>
<div class = " example " >
  <button mat-raised-button>Basic</button>
</div>

<h3> Stroked Button </h3>
<div class = " example " >
  <button mat-stroked-button> Basic </button>
  <a mat-stroked-button routerLink = "."> Link </a>
</div>

<h3> Flat Button </h3>
<div class = " example " >
  <button mat-flat-button> Basic </button>
  <a mat-flat-button routerLink = "."> Link </a>
</div>

<h3> Icon Button </h3>
<div class = " example " >
  <button mat-icon-button aria-label = "Example icon-button with a heart icon" >
    <mat-icon>favorite</mat-icon>
  </button>
</div>
<h3> Fab Button </h3>
<div class = "example " >
  <button mat-fab> Basic </button>
  <a mat-fab routerLink = "."> Link </a>
</div>

<h3> Mini Fab Button </h3>
<div class = " example " >
  <button mat-mini-fab> Basic </button>
 <a mat-mini-fab routerLink = "."> Link </a>
</div>