کنترل Progress Bar در انگولار متریال 7 – آموزش انگولار متریال

شنبه ۱۳ شهریور ۱۴۰۰
بازدید ۶۰۲ نفر
آرتین
(5 امتیاز از 1 رای)
Loading...

تصویر angular-material-7-progress-bar_6418 کنترل Progress Bar در انگولار متریال 7 – آموزش انگولار متریال

کنترل Progress Bar در انگولار متریال

<mat-progress-bar> یک دستورالعمل انگولار است که به منظور ایجاد و نمایش نوار پیشرفت (Progress Bar) مورد استفاده قرار می گیرد. در این بخش چگونگی استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

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

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

محتوای فایل 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 {MatProgressBarModule, MatRadioModule, MatSliderModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatProgressBarModule, MatRadioModule, MatSliderModule,
      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 {MatProgressBarModule, MatRadioModule, MatSliderModule} from '@angular/material'

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatProgressBarModule, MatRadioModule, MatSliderModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 0 10px;
}

.tp-section {

display: flex;

align-content: center;

align-items: center;

height: 60px;

}

.tp-margin {

margin: 0 10px;

}

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

<section class = "tp-section">
   <label class = "tp-margin">Color:</label>
   <mat-radio-group [(ngModel)] = "color">
      <mat-radio-button class = "tp-margin" value = "primary">
         Primary
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "accent">
         Accent
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "warn">
         Warn
      </mat-radio-button>
   </mat-radio-group>
</section>
<section class = "tp-section">
   <label class = "tp-margin">Mode:</label>
   <mat-radio-group [(ngModel)] = "mode">
      <mat-radio-button class = "tp-margin" value = "determinate">
         Determinate
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "indeterminate">
         Indeterminate
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "buffer">
         Buffer
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "query">
         Query
      </mat-radio-button>
   </mat-radio-group>
</section>
<section class = "tp-section" *ngIf = "mode === 'determinate' || mode === 'buffer'">
   <label class = "tp-margin">Progress:</label>
   <mat-slider class = "tp-margin" [(ngModel)] = "value"></mat-slider>
</section>
<section class = "tp-section" *ngIf = "mode === 'buffer'">
   <label class = "tp-margin">Buffer:</label>
   <mat-slider class = "tp-margin" [(ngModel)] = "bufferValue"></mat-slider>
</section>
<section class = "tp-section">
   <label class = "tp-margin">Mode: {{mode}}</label>
   <mat-progress-bar
      class = "tp-margin"
      [color] = "color"
      [mode] = "mode"
      [value] = "value"
      [bufferValue] = "bufferValue"
      >
   </mat-progress-bar>
</section>

<label class = "tp-margin">Color:</label>

<mat-radio-group [(ngModel)] = "color">

<mat-radio-button class = "tp-margin" value = "primary">

Primary

</mat-radio-button>

<mat-radio-button class = "tp-margin" value = "accent">

Accent

</mat-radio-button>

<mat-radio-button class = "tp-margin" value = "warn">

Warn

</mat-radio-button>

</mat-radio-group>

</section>

<mat-radio-group [(ngModel)] = "mode">

<mat-radio-button class = "tp-margin" value = "determinate">

Determinate

</mat-radio-button>

<mat-radio-button class = "tp-margin" value = "indeterminate">

Indeterminate

</mat-radio-button>

<mat-radio-button class = "tp-margin" value = "buffer">

Buffer

</mat-radio-button>

<mat-radio-button class = "tp-margin" value = "query">

Query

</mat-radio-button>

</mat-radio-group>

</section>

<label class = "tp-margin">Progress:</label>

<mat-slider class = "tp-margin" [(ngModel)] = "value"></mat-slider>

</section>

<label class = "tp-margin">Buffer:</label>

<mat-slider class = "tp-margin" [(ngModel)] = "bufferValue"></mat-slider>

</section>

<mat-progress-bar

class = "tp-margin"

[color] = "color"

[mode] = "mode"

[value] = "value"

[bufferValue] = "bufferValue"

</mat-progress-bar>

</section>

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

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   color = 'primary';
   mode = 'determinate';
   value = 50;
   bufferValue = 75;
}