在角材料中使用

加入 Angular Material 之后， 组件可以用于生成 Material Design 样式的按钮。在角材料中使用 可以帮助你快速创建标准化的用户界面，并提供可自定义的样式，以便将按钮与应用程序的品牌保持一致。

安装 Angular Material

要使用 ，必须先添加 Angular Material 包。在终端中，使用以下命令来安装 Angular Material：

ng add @angular/material

导入按钮模块

要使用 ，必须将 MatButtonModule 模块导入到组件中。

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  ...
  imports: [
    MatButtonModule
  ],
  ...
})
export class AppModule { }

在 HTML 中使用

在组件的 HTML 模板中，您可以使用 标记来创建按钮。下面是一个简单的示例：

<mat-button>点击我</mat-button>

组件提供许多属性和事件，以控制按钮的外观和功能。以下是一些常用属性：

| 属性 | 描述 | | --- | --- | | color | 按钮的颜色，可以是 primary, accent, warn 或任何常规颜色 | | disabled | 是否禁用按钮 | | href | 链接到的 URL | | routerLink | 导航到的路由链接 |

<mat-button [color]="'primary'" [disabled]="false">主按钮</mat-button>
<mat-button [color]="'accent'" [disabled]="false">强调按钮</mat-button>
<mat-button [color]="'warn'" [disabled]="true">禁用按钮</mat-button>
<mat-button [href]="'/about-us'">链接按钮</mat-button>
<mat-button [routerLink]="'/contact'">路由链接按钮</mat-button>

自定义样式

可以根据您的需要进行自定义。您可以使用 CSS 来更改按钮的各个方面，例如背景色、颜色、字体大小等等。

.my-button {
  background-color: red;
  color: white;
  font-size: 16px;
}

<mat-button class="my-button">自定义按钮</mat-button>

总结

使用 可以让您快速创建 Material Design 样式的按钮。您可以通过添加属性和事件来控制按钮的外观和功能，并使用 CSS 来进行进一步的自定义。现在，您可以在角材料中轻松地创建符合您应用程序品牌的按钮！