Angular Material 中常用的组件及其使用代码示例

一、按钮（MatButton）：
Angular Material 的按钮组件提供了不同的样式和行为。

<button mat-button>Basic Button</button>
<button mat-raised-button color="primary">Raised Button</button>
<button mat-stroked-button color="accent">Stroked Button</button>
<button mat-flat-button color="warn">Flat Button</button>

在上述代码中：

• mat-button 是基本的按钮样式，通常比较扁平。
• mat-raised-button 是凸起的按钮，通过 color="primary" 可以将其颜色设置为主题的主要颜色。
• mat-stroked-button 是带有边框的按钮，color="accent" 可以设置为主题的强调色。
• mat-flat-button 是扁平按钮，color="warn" 可以设置为警告色。

二、输入框（MatInput）：
用于用户输入文本信息。

<mat-form-field appearance="fill">
  <mat-label>Input</mat-label>
  <input matInput placeholder="Enter your name">
</mat-form-field>

• mat-form-field 是输入框的容器，appearance="fill" 可以设置其外观样式。
• mat-label 为输入框提供标签。
• matInput 指令应用于标准的 HTML 输入元素，为其提供 Angular Material 的样式和行为。

三、卡片（MatCard）：
用于显示内容，如文本、图像等。

<mat-card>
  <mat-card-header