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

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

تصویر angular-material-7-slider_6369 کنترل Slider در انگولار متریال 7 – آموزش انگولار متریال

کنترل Slide در انگولار متریال

<mat-slider> یک دستورالعمل انگولار است که به منظور ایجاد کنترل Slider با استایل متریال دیزاین استفاده می شود. در این بخش چگونگی استفاده از این دستورالعمل برای ساخت کنترل Slider را بررسی خواهیم کرد.

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatSliderModule, MatCheckboxModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-slider
   class = "tp-margin"
   [disabled] = "disabled"
   [invert] = "invert"      
   [thumbLabel] = "thumbLabel"     
   [(ngModel)] = "value"
   [vertical] = "vertical">
</mat-slider>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "thumbLabel">Show thumb label</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "vertical">Vertical</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "invert">Inverted</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

<mat-slider

class = "tp-margin"

[disabled] = "disabled"

[invert] = "invert"

[thumbLabel] = "thumbLabel"

[(ngModel)] = "value"

[vertical] = "vertical">

</mat-slider>

<mat-checkbox class = "tp-margin" [(ngModel)] = "thumbLabel">Show thumb label</mat-checkbox>

</section>

<mat-checkbox class = "tp-margin" [(ngModel)] = "vertical">Vertical</mat-checkbox>

<mat-checkbox class = "tp-margin" [(ngModel)] = "invert">Inverted</mat-checkbox>

</section>

<mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>

</section>

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

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

.mat-slider-horizontal {
   width: 300px;
}
.mat-slider-vertical {
   height: 300px;
}

.tp-section {

display: flex;

align-content: center;

align-items: center;

height: 60px;

}

.tp-margin {

margin: 30px;

}

.mat-slider-horizontal {

width: 300px;

}

.mat-slider-vertical {

height: 300px;

}

محتوای فایل 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'; 
   disabled = false;
   invert = false;
   thumbLabel = false;
   value = 0;
   vertical = false;
}

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'materialApp';

disabled = false;

invert = false;

thumbLabel = false;

value = 0;

vertical = false;

}

نتییجه

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

تصویر angular-material-7-slider_6369_1 کنترل Slider در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

ما پنج کنترل چک باکس را برای شخصی سازی کنترل slider ایجاد کرده و به متغیرهای تعریف شده در کلاس کامپوننت bind کرده ایم.
سپس کنترل slider را بر ایجاد و متغیرهای موجود را به آن وصل کرده ایم.

انگولار متریال - Slide Toggle انگولار متریال - Select