Angular Material 7 – 按钮

Angular Material 7 是一个基于 Angular 的 UI 组件库，提供了丰富的组件，其中按钮就是其中之一。按钮是一个常用的 UI 元素，常常用于触发用户交互。在 Angular Material 7 中，我们可以简单快速地创建一个按钮。

基本用法

在 Angular Material 7 中，我们可以使用 mat-button 元素快速创建一个基本的按钮。示例代码如下：

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

上述代码会创建一个具有 “点击我” 标签的基本按钮。该按钮没有任何特殊属性，只是一个标准的带有 mat-button 类的 HTML 按钮。

按钮类型

Angular Material 7 提供了几种不同类型的按钮，以适应不同的情境。我们可以使用 mat-raised-button、mat-flat-button、mat-stroked-button 以及 mat-icon-button 等不同类来创建不同类型的按钮。

突出按钮

突出按钮是一个平面的带有阴影的按钮，用于标识主要的操作。我们可以使用 mat-raised-button 类创建突出按钮。示例代码如下：

<button mat-raised-button color="primary">点击我</button>

上述代码会创建一个带有 color="primary" 属性的突出按钮。我们可以通过该属性更改按钮的颜色，其中“primary”表示主色调。

平面按钮

平面按钮是一个简单的按钮，和突出按钮相比没有额外的阴影和立体效果。我们可以使用 mat-flat-button 类创建平面按钮。示例代码如下：

<button mat-flat-button color="primary">点击我</button>

上述代码会创建一个带有 color="primary" 属性的平面按钮。

描边按钮

描边按钮是一个或多个有色虚线环绕的按钮，用于突出按钮的轮廓。我们可以使用 mat-stroked-button 类创建描边按钮。示例代码如下：

<button mat-stroked-button color="primary">点击我</button>

上述代码会创建一个带有 color="primary" 属性的描边按钮。

图标按钮

图标按钮是一个带有图标的按钮，用于快速识别按钮的功能。我们可以使用 mat-icon-button 类创建图标按钮。示例代码如下：

<button mat-icon-button><mat-icon>home</mat-icon></button>

上述代码会创建一个带有“home”图标的图标按钮。

按钮尺寸

Angular Material 7 提供了几种尺寸用于调整按钮的大小。我们可以使用 mat-button 类和 mat-mini-fab、mat-small-fab、mat-large-fab 类等组合创建不同尺寸的按钮。

基本尺寸

默认情况下，我们创建的按钮是一个中等尺寸的按钮。我们可以将 mat-button 类应用到任何大小的 HTML 按钮上，以创建一个基本尺寸的按钮。示例代码如下：

<button mat-button color="primary">点击我</button>

上述代码会创建一个带有 color="primary" 属性的基本尺寸按钮。

小号圆形按钮

小号圆形按钮是与按钮的标准大小相似的按钮，但使用圆形而不是方形。我们可以使用 mat-mini-fab 类创建小号圆形按钮。示例代码如下：

<button mat-mini-fab color="primary"><mat-icon>add</mat-icon></button>

上述代码会创建一个带有“add”图标的小号圆形按钮。

小号按钮

小号按钮比标准按钮小一些，但比小号圆形按钮大一些。我们可以使用 mat-small-fab 类创建小号按钮。示例代码如下：

<button mat-small-fab color="primary"><mat-icon>add</mat-icon></button>

上述代码会创建一个带有“add”图标的小号按钮。

大号圆形按钮

大号圆形按钮比标准按钮大一些，且使用圆形而不是方形。我们可以使用 mat-large-fab 类创建大号圆形按钮。示例代码如下：

<button mat-large-fab color="primary"><mat-icon>add</mat-icon></button>

上述代码会创建一个带有“add”图标的大号圆形按钮。

按钮功能

在 Angular Material 7 中，我们可以使用按钮来执行不同的功能。下面是几个常见的按钮功能示例。

切换按钮

切换按钮是一种用于切换状态的按钮，通常用于开关。我们可以使用 mat-slide-toggle 元素创建一个切换按钮。示例代码如下：

<mat-slide-toggle>打开/关闭</mat-slide-toggle>

上述代码会创建一个带有 “打开/关闭” 标签的切换按钮。

进度按钮

进度按钮是一种用于显示任务进度的按钮，通常用于表明当前执行任务的进度。我们可以使用 mat-progress-button 元素创建一个进度按钮。示例代码如下：

<mat-progress-button mode="indeterminate">进行中…</mat-progress-button>

上述代码会创建一个带有 “进行中…” 标签的进度按钮。

特殊按钮

除了常规按钮之外，Angular Material 7 还提供了一些特殊的按钮，例如 FAB 、扩展按钮等等。我们可以根据具体需求使用特殊按钮。示例代码如下：

<button mat-fab color="primary"><mat-icon>add</mat-icon></button>

上述代码会创建一个带有“add”图标的 FAB 按钮。

自定义按钮样式

如果想要更改按钮的样式，我们可以使用 CSS 样式来自定义按钮外观。下面是一个自定义按钮样式的代码示例：

.custom-button {
  background-color: #f44336;
  color: white;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 24px;
  transition: 0.3s;
}

.custom-button:hover {
  background-color: #d32f2f;
}

上述代码定义了一个名为 .custom-button 的 CSS 类，用于自定义按钮的样式。我们可以将该样式应用到 mat-button 元素上，以生成自定义样式的按钮。示例代码如下：

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

上述代码会创建一个带有自定义样式的按钮。

结论

Angular Material 7 提供了多种类型、尺寸和功能的按钮，可以满足不同项目的需求。使用 Angular Material 7 按钮组件，我们可以快速创建符合规范的按钮，并且可以方便地进行自定义样式。