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