Angular Material 7 – 切换按钮

在Web开发中，常常需要使用各种类型的按钮。其中，切换按钮是一种实现简单的常见按钮类型。它允许用户在两个或更多个状态之间切换。作为一款流行的前端框架，Angular提供了一个名为Angular Material的组件库，可以轻松构建漂亮的用户界面。

本文将介绍如何在Angular Material 7中使用切换按钮组件。

准备工作

在开始之前，需要安装并配置好Angular Material。可以按照下面的步骤进行安装：

安装Angular Material

使用npm安装Angular Material：

npm install --save @angular/material @angular/cdk

导入模块

导入Material组件和所需的Angular模块：

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  exports: [
    MatButtonModule,
    MatButtonToggleModule,
    MatIconModule
  ]
})
export class MaterialModule { }

现在已经准备好开始使用切换按钮了。

MatButtonToggle组件

MatButtonToggle是Angular Material的一个组件。它是一种按钮类型，允许您在两个或更多个状态之间切换。MatButtonToggle可以与MatIcon一起使用，以在切换时显示图标。MatButtonToggle使用MatButtonToggleGroup指令来实现组。

下面是使用MatButtonToggle创建切换按钮的示例代码：

<mat-button-toggle-group>
  <mat-button-toggle value="left">Left</mat-button-toggle>
  <mat-button-toggle value="middle">Middle</mat-button-toggle>
  <mat-button-toggle value="right">Right</mat-button-toggle>
</mat-button-toggle-group>

在上面的示例中，我们创建了一个MatButtonToggleGroup元素和三个MatButtonToggle元素。当单击任一切换按钮时，切换组上的所有切换按钮都将出现切换。

有时，当您需要在单个视图中使用多个MatButtonToggle分组时，可以使用group属性来明确指定每个组。例如：

<mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="left">Left</mat-button-toggle>
  <mat-button-toggle value="middle">Middle</mat-button-toggle>
  <mat-button-toggle value="right">Right</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group #group2="matButtonToggleGroup">
  <mat-button-toggle value="top">Top</mat-button-toggle>
  <mat-button-toggle value="center">Center</mat-button-toggle>
  <mat-button-toggle value="bottom">Bottom</mat-button-toggle>
</mat-button-toggle-group>

在上面的示例中，我们使用group和group2属性来指定每个切换组。

MatButtonToggle with MatIcon

MatIcon是Angular Material的另一个非常有用的组件。它可以让你轻松地添加图标到你的应用程序中。

下面是如何在MatButtonToggle中使用MatIcon的示例代码：

<mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="bold">
    <mat-icon>format_bold</mat-icon> Bold
  </mat-button-toggle>
  <mat-button-toggle value="italic">
    <mat-icon>format_italic</mat-icon> Italic
  </mat-button-toggle>
  <mat-button-toggle value="underline">
    <mat-icon>format_underlined</mat-icon> Underline
  </mat-button-toggle>
</mat-button-toggle-group>

在上面的示例中，我们将图标添加到每个切换按钮上。当单击某个切换按钮时，将显示对应的图标。

Customize MatButtonToggle

有时，您可能需要自定义MatButtonToggle的颜色和字体大小。MatButtonToggle提供了一种简单的方法，称为@HostBinding，允许您直接绑定到DOM属性。

下面的示例演示如何使用@HostBinding自定义MatButtonToggle文本和背景颜色：

// styles.scss
mat-button-toggle {
  font-size: 20px;
  background-color: red;
  color: white;

  &:hover {
    background-color: blue;
  }
}

// component.html
<mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="left">Left</mat-button-toggle>
  <mat-button-toggle value="middle">Middle</mat-button-toggle>
  <mat-button-toggle value="right">Right</mat-button-toggle>
</mat-button-toggle-group>

在上面的示例中，我们使用CSS @HostBinding指令来设置背景颜色，文本颜色和字体大小。当鼠标悬停在切换按钮上时，还将显示蓝色背景。