Переключатель кнопки углового материала

Опубликовано: 11 Августа, 2022

Angular Material — это библиотека компонентов пользовательского интерфейса, разработанная Google, чтобы разработчики Angular могли разрабатывать современные приложения структурированным и отзывчивым образом. Используя эту библиотеку, мы можем значительно повысить удобство работы конечного пользователя, тем самым популяризируя наше приложение. Эта библиотека содержит современные готовые к использованию элементы, которые можно использовать напрямую с минимальным дополнительным кодом или без него.

Компонент Button Toggle в материале Angular позволяет пользователю переключаться между включенным и выключенным состояниями для выполнения определенных действий.

<mat-button-toggle> — это директива в угловом материале. Чтобы создать кнопку-переключатель или кнопку включения/выключения с угловым дизайном материала и анимацией, используется директива 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. Следующая команда выполняется в Angular CLI для установки библиотеки материалов angular:

ng add @angular/material

Перед выполнением вышеуказанной команды убедитесь, что путь открыт в терминале.

Подробную процедуру установки см . в статье Добавление компонента Angular Material в приложение Angular.

Добавление компонента переключения кнопок:

Чтобы использовать компонент Button Toggle, нам нужно импортировать его в файл app.module.ts :

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

Чтобы использовать компонент кнопки-переключателя в нашем коде, мы должны импортировать MatButtonToggleModule в массив imports.

Структура проекта: После успешной установки структура проекта будет выглядеть следующим образом:

Пример 1. Пример ниже иллюстрирует реализацию кнопки Toggle Angular Material.

app.component.html

<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>

app.component.ts

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

app.module.ts

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 {}

Выход:

Кнопка переключения режима выбора:

Есть 2 режима выбора Angular Toggle Button:

Одиночный выбор:

Он позволяет выбрать только один элемент в группе переключателей. Чтобы создать одну кнопку-переключатель выбора, производная <mat-button-toggle> вложена в <mat-button-toggle-group>. <mat-button-toggle-group> по умолчанию ведет себя как группа переключателей, позволяя выбирать только один элемент. Когда пользователь делает один выбор, значение выбранного элемента отображается на экране пользовательского интерфейса.

Множественный выбор:

Это позволяет выбрать более одного элемента в группе переключателей. Чтобы создать кнопку-переключатель множественного выбора, производная <mat-button-toggle> вложена в <mat-button-toggle-group> , и используется атрибут с именем Multiple. При добавлении нескольких атрибутов можно выбрать несколько элементов (поведение флажка). Для множественного выбора атрибут Multiple добавляется в директиву <mat-button-toggle-group> . Когда пользователь делает множественный выбор, несколько значений выбираются и отображаются как значения, разделенные запятыми, когда значения просматриваются на экране пользовательского интерфейса.

Пример 2. Пример ниже иллюстрирует реализацию кнопки Toggle путем указания различных режимов выбора в Angular Material.

app.component.html

<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>

app.component.ts

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

app.module.ts

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 {}

Выход :

Ссылка : https://material.angular.io/components/button-toggle/overview

Picked AngularJS

Переключатель кнопки углового материала

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

РЕКОМЕНДУЕМЫЕ СТАТЬИ