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

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

تصویر angular-material-7-slide-toggle_6371 کنترل Slide Toggle در انگولار متریال 7 – آموزش انگولار متریال

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

یک دستورالعمل انگولار است که به منظور ایجاد کنترل Slide Toggle استفاده می شود. این کنترل مانند کنترل چک باکس می توانند فعال یا غیرفعال باشد اما از لحاظ ظاهری و Context با آن متفاوت است.

در این بخش چگونگی ایجاد و استفاده از کنترل در انگولار را بررسی خواهیم کرد.

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

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ۶ ایجاد کرده بودیم را برای استفاده از کنترل تغییر می دهیم.

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatSlideToggleModule, MatCheckboxModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-slide-toggle
   class = "tp-margin"
   [checked] = "checked"
   [disabled] = "disabled">
   Slide!
</mat-slide-toggle>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "checked">Checked</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

<mat-slide-toggle

class = "tp-margin"

[checked] = "checked"

[disabled] = "disabled">

Slide!

</mat-slide-toggle>

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

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

.tp-section {

display: flex;

align-content: center;

align-items: center;

height: 60px;

}

.tp-margin {

margin: 30px;

}

محتوای فایل 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;
   checked = 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;

checked = false;

}

نتییجه

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

تصویر angular-material-7-slide-toggle_6371_1 کنترل Slide Toggle در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا ما با استفاده از دستورالعمل mat-checkbox دو چک باکس ایجاد کرده ایم که به متغیرهای موجود در کلاس کامپوننت متصل شده اند و برای شخصی سازی کنترل Slide Toggle استفاده می شوند.
سپس با استفاده از دستورالعمل mat-slide-toggle یک کنترل Slide Toggle را بر اساس متغیرهای مجود در کلاس کامپوننت ایجاد کرده ایم.

انگولار متریال - Menu انگولار متریال - Slider