Toggle Button در انگولار متریال 7 – آموزش انگولار متریال

جمعه ۱۲ شهریور ۱۴۰۰
بازدید ۵۲۲ نفر
AmRo
(10 امتیاز از 2 رای)
Loading...

تصویر angular-material-7-toggle-button_6403 Toggle Button در انگولار متریال 7 – آموزش انگولار متریال

Toggle Button در انگولار متریال

<mat-button-toggle> یک دستورالعمل انگولار است که به منظور ایجاد Toggle Button با استایل و انیمیشن متریال دیزاین مورد استفاده قرار می گیرد. در این بخش چگونگی ایجاد و استفاده از این کنترل را با یک مثال ساده بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat-button-toggle> تغییر می دهیم.

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

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

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatButtonToggleModule, MatIconModule} from '@angular/material'

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatButtonToggleModule, MatIconModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

محتوای فایل app.component.css:

.tp-selected-value {
   margin: 15px 0;
}

.tp-selected-value {

margin: 15px 0;

}

محتوای فایل app.component.html:

<mat-button-toggle-group #group = "matButtonToggleGroup">
   <mat-button-toggle value = "left">
      <mat-icon>format_align_left</mat-icon>
   </mat-button-toggle>
   <mat-button-toggle value = "center">
      <mat-icon>format_align_center</mat-icon>
   </mat-button-toggle>
   <mat-button-toggle value = "right">
      <mat-icon>format_align_right</mat-icon>
   </mat-button-toggle>
   <mat-button-toggle value = "justify" disabled>
      <mat-icon>format_align_justify</mat-icon>
   </mat-button-toggle>
</mat-button-toggle-group>
<div class = "tp-selected-value">Selected value: {{group.value}}</div>

<mat-button-toggle-group #group = "matButtonToggleGroup">

<mat-button-toggle value = "left">

<mat-icon>format_align_left</mat-icon>

</mat-button-toggle>

<mat-button-toggle value = "center">

<mat-icon>format_align_center</mat-icon>

</mat-button-toggle>

<mat-button-toggle value = "right">

<mat-icon>format_align_right</mat-icon>

</mat-button-toggle>

<mat-button-toggle value = "justify" disabled>

<mat-icon>format_align_justify</mat-icon>

</mat-button-toggle>

</mat-button-toggle-group>

<div class = "tp-selected-value">Selected value: {{group.value}}</div>

نتیجه

بعد از اجرای برنامه خروجی زیر را مشاهده خواهید کرد:

تصویر angular-material-7-toggle-button_6403_1 Toggle Button در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا با استفاده از دستورالعمل mat-button-toggle-group یک گروه برای Toggle Button ها را ایجاد کردیم.
سپس با استفاده از دستورالعمل mat-button-toggle دکمه ها را به آن گروه اضافه نمودیم.

انگولار متریال - Badge انگولار متریال - Buttons