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

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

تصویر angular-material-7-ripples_6420 Ripples در انگولار متریال 7 – آموزش انگولار متریال

Ripples در انگولار متریال

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

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatRippleModule, MatCheckboxModule, MatInputModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-checkbox [(ngModel)] = "centered" class = "tp-ripple-checkbox">Centered</mat-checkbox>
<mat-checkbox [(ngModel)] = "disabled" class = "tp-ripple-checkbox">Disabled</mat-checkbox>
<mat-checkbox [(ngModel)] = "unbounded" class = "tp-ripple-checkbox">Unbounded</mat-checkbox>
<section>
   <mat-form-field class = "tp-ripple-form-field">
      <input matInput [(ngModel)] = "radius" type = "number" placeholder = "Radius">
   </mat-form-field>
   <mat-form-field class = "tp-ripple-form-field">
      <input matInput [(ngModel)] = "color" type = "text" placeholder = "Color">
   </mat-form-field>
</section>
<div class = "tp-ripple-container mat-elevation-z4"
   matRipple
   [matRippleCentered] = "centered"
   [matRippleDisabled] = "disabled"
   [matRippleUnbounded] = "unbounded"
   [matRippleRadius] = "radius"
   [matRippleColor] = "color">
   Click me
</div>

<mat-checkbox [(ngModel)] = "centered" class = "tp-ripple-checkbox">Centered</mat-checkbox>

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

<mat-checkbox [(ngModel)] = "unbounded" class = "tp-ripple-checkbox">Unbounded</mat-checkbox>

<mat-form-field class = "tp-ripple-form-field">

</mat-form-field>

<mat-form-field class = "tp-ripple-form-field">

</mat-form-field>

</section>

<div class = "tp-ripple-container mat-elevation-z4"

matRipple

[matRippleCentered] = "centered"

[matRippleDisabled] = "disabled"

[matRippleUnbounded] = "unbounded"

[matRippleRadius] = "radius"

[matRippleColor] = "color">

Click me

</div>

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

.tp-ripple-container {
   cursor: pointer;
   text-align: center;
   width: 300px;
   height: 300px;
   line-height: 300px;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-drag: none;
   -webkit-tap-highlight-color: transparent;
}
.tp-ripple-checkbox {
   margin: 6px 12px 6px 0;
}
.tp-ripple-form-field {
   margin: 0 12px 0 0;
}

.tp-ripple-container {

cursor: pointer;

text-align: center;

width: 300px;

height: 300px;

line-height: 300px;

user-select: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-webkit-user-drag: none;

-webkit-tap-highlight-color: transparent;

}

.tp-ripple-checkbox {

margin: 6px 12px 6px 0;

}

.tp-ripple-form-field {

margin: 0 12px 0 0;

}

محتوای فایل 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';
   centered = false;
   disabled = false;
   unbounded = false;
   radius: number;
   color: string;
}

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'materialApp';

centered = false;

disabled = false;

unbounded = false;

radius: number;

color: string;

}

نتیجه

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

تصویر angular-material-7-ripples_6420_1 Ripples در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا ما با استفاده از دستورالعمل mat-checkbox چند چک باکس ایجاد کرده و آن ها با استفاده از ngModel به متغیرهای تعریف شده در کلاس کامپوننت متصل کرده ایم.
سپس بخش نشان دهنده افکت Ripple را بر اساس مقدار متغیرهای موجود ایجاد نموده ایم.

انگولار متریال - SnackBar انگولار متریال - Progress Bar