Angular Material按钮切换

Angular Material是一个由谷歌开发的UI组件库，以便Angular开发人员能够以一种结构化和响应式的方式开发现代应用程序。通过使用这个库，我们可以大大增加终端用户的用户体验，从而为我们的应用程序赢得人气。这个库包含了现代的即用元素，可以直接使用，只需最少或没有额外的代码。

Angular Material中的Button Toggle组件允许用户在执行特定动作时在开启和关闭状态之间进行转换。

<mat-button-toggle>是angular material中的一个指令。为了创建一个具有angular material设计和动画的切换按钮或开/关按钮，Angular <mat-button-toggle>指令被使用。这些按钮可以被配置为像单选按钮或复选框一样的行为，这样就可以在按钮上进行单选或多选了。

语法 :

<mat-button-toggle>Toggle Button</mat-button-toggle>

<mat-button-toggle-group>是一个Angular指令，用于分组<mat-button-toggle>执行某些动作的项目。

语法:

<mat-button-toggle-group #nameOfToggleGroup="matButtonToggleGroup">
    <mat-button-toggle value="Toggle Button 1">
            Toggle Button 1
       </mat-button-toggle>
    <mat-button-toggle value="Toggle Button 2">
            Toggle Button 2
    </mat-button-toggle>
    ...
</mat-button-toggle-group>

安装语法:

基本前提是，我们必须在系统中安装Angular CLI，以便添加和配置Angular Material库。在Angular CLI上执行以下命令来安装Angular Material库。

ng add @angular/material

确保在执行上述命令前应在终端中打开路径。

详细的安装过程请参考在Angular应用程序中添加Angular Material组件的文章。

添加按钮切换组件：

为了使用Button Toggle组件，我们需要将其导入app.module.ts文件中。

import {MatButtonToggleModule} from '@angular/material/button-toggle';

为了在我们的代码中使用切换按钮组件，我们必须将MatButtonToggleModule导入到导入数组。

项目结构：安装成功后，项目结构将看起来像以下图片。

Angular Material按钮切换

Project Structure

实例1 。下面的例子说明了Angular Material Button Toggle的实现。

<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Button Toggle</h3>
    <mat-button-toggle-group #toggleBtn="matButtonToggleGroup">
        <mat-button-toggle value="Toggle Button 1">
            Toggle Button 1
        </mat-button-toggle>
        <mat-button-toggle value="Toggle Button 2">
            Toggle Button 2
        </mat-button-toggle>
    </mat-button-toggle-group>
    <br />
        You have selected : {{ toggleBtn.value }}
</div>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "AngularApp";
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
  
import { AppComponent } from "./app.component";
import { MatButtonToggleModule } 
    from "@angular/material/button-toggle";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    MatButtonToggleModule,
    BrowserAnimationsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular Material按钮切换

角度材料按钮切换

按钮切换选择模式：

有2种选择模式角度切换按钮。

Single selection:

它只允许在切换组内选择一个项目。要创建一个单一选择的切换按钮，<mat-button-toggle>衍生物被嵌套在<mat-button-toggle-group>.</mat-button-toggle-group>下<mat-button-toggle-group>，行为像一个单选按钮组，默认只允许选择一个项目。当用户进行单一选择时，所选项目的值会显示在用户界面屏幕上。

Multiple selections:

它允许在切换组中选择一个以上的项目。为了创建一个多选切换按钮，<mat-button-toggle>衍生物被嵌套在下面<mat-button-toggle-group>，并使用一个名为多选的属性。当多个属性被添加时，可以选择许多项目（复选框行为）。对于多选，多选属性被添加到<mat-button-toggle-group>指令中。当用户进行多重选择时，多个值被选中并显示出来，当值在用户界面屏幕上被查看时，是逗号分隔的值。

实例2 。下面的例子说明了Button Toggle的实现，通过在Angular Material中指定不同的选择模式。

<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Button Toggle</h3>
    <div>
        <h4>Single selection</h4>
        <mat-button-toggle-group #toggleGroup1="matButtonToggleGroup">
            <mat-button-toggle value="Angular Material UI">
                Angular Material UI
            </mat-button-toggle>
            <mat-button-toggle value="React Material UI">
                React Material UI
            </mat-button-toggle>
        </mat-button-toggle-group>
        <br />
        You have selected : {{ toggleGroup1.value }} 
    </div>
    <br />
    <div>
        <h4>Multiple selection</h4>
        <mat-button-toggle-group #toggleGroup2="matButtonToggleGroup" multiple>
            <mat-button-toggle value="Angular">
                Angular
            </mat-button-toggle>
            <mat-button-toggle value="React">
                React
            </mat-button-toggle>
            <mat-button-toggle value="Vue">
                Vue
            </mat-button-toggle>
        </mat-button-toggle-group>
        <br />
        You have selected : {{ toggleGroup2.value }} 
    </div>
</div>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "AngularApp";
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
  
import { AppComponent } from "./app.component";
import { MatButtonToggleModule } 
    from "@angular/material/button-toggle";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    MatButtonToggleModule,
    BrowserAnimationsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出 :

Angular Material按钮切换