Angular Material 是 Angular 框架的一个 UI 组件库，包含了许多常用的 UI 组件，如按钮、输入框、菜单等。在 Angular Material 中，按钮是最基础的组件之一，也是最常用的组件之一。本文将介绍 Angular Material 中的按钮样式，包括按钮的类型、大小、颜色和形状等。
按钮类型
在 Angular Material 中，按钮有三种类型：基础按钮、浮动按钮和图标按钮。
基础按钮
基础按钮是最常用的按钮类型，它通常用于触发某个操作或提交表单。在 Angular Material 中，基础按钮有四种样式：平面按钮、凸起按钮、无边框按钮和链接按钮。它们的样式分别如下：
<button mat-button>平面按钮</button> <button mat-raised-button>凸起按钮</button> <button mat-stroked-button>无边框按钮</button> <button mat-link-button>链接按钮</button>
浮动按钮
浮动按钮是一种圆形的按钮，通常用于触发某个浮动操作菜单。在 Angular Material 中，浮动按钮有三种样式：基础浮动按钮、凸起浮动按钮和无边框浮动按钮。它们的样式分别如下：
<button mat-fab>基础浮动按钮</button> <button mat-raised-button mat-fab>凸起浮动按钮</button> <button mat-stroked-button mat-fab>无边框浮动按钮</button>
图标按钮
图标按钮是一种只包含图标的按钮，通常用于触发某个操作或表示某个状态。在 Angular Material 中，图标按钮有三种样式：基础图标按钮、凸起图标按钮和无边框图标按钮。它们的样式分别如下：
<button mat-icon-button>基础图标按钮</button> <button mat-raised-button mat-icon-button>凸起图标按钮</button> <button mat-stroked-button mat-icon-button>无边框图标按钮</button>
按钮大小
在 Angular Material 中，按钮有三种大小：普通、小号和大号。可以通过 mat-button, mat-fab 或 mat-icon-button 上的 mat-mini-fab 和 mat-small-fab 属性来设置按钮的大小。例如：
<button mat-button>普通按钮</button> <button mat-fab mat-mini-fab>小号浮动按钮</button> <button mat-icon-button mat-small-fab>小号图标按钮</button> <button mat-raised-button mat-large-fab>大号凸起按钮</button>
按钮颜色
在 Angular Material 中，按钮有四种颜色：基础、主要、次要和警告。可以通过 mat-button, mat-fab 或 mat-icon-button 上的 color 属性来设置按钮的颜色。例如：
<button mat-button color="primary">主要按钮</button> <button mat-raised-button color="accent">次要凸起按钮</button> <button mat-stroked-button color="warn">警告无边框按钮</button>
按钮形状
在 Angular Material 中，按钮有两种形状：圆形和方形。可以通过 mat-fab 或 mat-icon-button 上的 mat-mini-fab 和 mat-small-fab 属性来设置按钮的形状。例如：
<button mat-fab>圆形浮动按钮</button> <button mat-icon-button>方形图标按钮</button> <button mat-fab mat-mini-fab>小圆形浮动按钮</button> <button mat-icon-button mat-small-fab>小方形图标按钮</button>
总结
Angular Material 中的按钮样式非常丰富，可以通过不同的类型、大小、颜色和形状来满足不同的需求。在实际开发中，我们应该根据具体的场景来选择合适的按钮样式，并遵循一定的设计规范和风格，以提高用户体验和整体美感。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6603fc7cd10417a222099f9d
