آموزش متریال ها در انگولار ۷

3 سال پیش

آموزش متریال ها در انگولار ۷

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش متریال ها در انگولار ۷ خواهیم پرداخت.

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

برای استفاده از متریال، باید بسته را وارد کنیم. انگولار ۲ همچنین دارای تمام ویژگی های فوق است اما آنها به عنوان بخشی از ماژول @angular/core در دسترس هستند. از انگولار ۴، ماژول Materials با یک ماژول جداگانه @angular/materials در دسترس قرار گرفته است. این به کاربر کمک می کند تا فقط مواد مورد نیاز را در پروژه خود وارد کند.

برای شروع استفاده از متریال ها باید دو پکیج Material و cdk را نصب کنید. اجزای متریال برای ویژگی های پیشرفته به ماژول انیمیشن بستگی دارد. بنابراین شما به بسته انیمیشن برای همان @angular/animations نیاز دارید. بسته قبلاً در فصل قبل به روز شده است. ما قبلا بسته های @angular/cdk را در فصل های قبلی برای ماژول مجازی و درگ دراپ نصب کرده ایم.

در زیر دستور اضافه کردن مواد به پروژه شما آمده است

npm install --save @angular/material

Materials and CDK

اجازه دهید اکنون package.json را ببینیم. @angular/material و @angular/cdk نصب شده اند.

{ 
   "name": "angular7-app", 
   "version": "0.0.0", 
   "scripts": { 
      "ng": "ng", 
      "start": "ng serve",
      "build": "ng build", 
      "test": "ng test", 
      "lint": "ng lint", 
      "e2e": "ng e2e" 
   }, 
   "private": true, 
   "dependencies": { 
      "@angular/animations": "~7.2.0", 
      "@angular/cdk": "^7.3.4", 
      "@angular/common": "~7.2.0", 
      "@angular/compiler": "~7.2.0", 
      "@angular/core": "~7.2.0", 
      "@angular/forms": "~7.2.0", 
      "@angular/material": "^7.3.4", 
      "@angular/platform-browser": "~7.2.0", 
      "@angular/platform-browser-dynamic": "~7.2.0", 
      "@angular/router": "~7.2.0", 
      "core-js": "^2.5.4", 
      "rxjs": "~6.3.3", 
      "tslib": "^1.9.0", 
      "zone.js": "~0.8.26" 
   }, 
   "devDependencies": { 
      "@angular-devkit/build-angular": "~0.13.0", 
      "@angular/cli": "~7.3.2", 
      "@angular/compiler-cli": "~7.2.0", 
      "@angular/language-service": "~7.2.0", 
      "@types/node": "~8.9.4", 
      "@types/jasmine": "~2.8.8", 
      "@types/jasminewd2": "~2.0.3", 
      "codelyzer": "~4.5.0", 
      "jasmine-core": "~2.99.1", 
      "jasmine-spec-reporter": "~4.2.1", 
      "karma": "~3.1.1", 
      "karma-chrome-launcher": "~2.2.0", 
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": "~5.4.0", 
      "ts-node": "~7.0.0", 
      "tslint": "~5.11.0", 
      "typescript": "~3.2.2"
   } 
}

ما پکیج هایی را که برای کار با مواد نصب شده اند برجسته کرده ایم.

اکنون ماژول ها را در ماژول والد – app.module.ts مطابق شکل زیر وارد می کنیم.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      MatSidenavModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

در فایل فوق ماژول های زیر را از @angular/materials ایمپورت کرده ایم.

import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

و همانطور که در زیر نشان داده شده است در آرایه واردات استفاده می شود

imports: [
   BrowserModule,
   AppRoutingModule,
   HttpClientModule,
   ScrollDispatchModule,
   DragDropModule,
   ReactiveFormsModule,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   MatSidenavModule
],

app.component.ts مطابق شکل زیر است –

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor() {}
}

اجازه دهید اکنون پشتیبانی material-css را در styles.css اضافه کنیم.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

منو

برای افزودن منو، <mat-menu></mat-menu> استفاده می شود. فایل و موارد Save As به دکمه زیر mat-menu اضافه می شوند. یک دکمه اصلی منو اضافه شده است. مرجع همان <mat-menu> با استفاده از [matMenuTriggerFor]=”menu” و استفاده از منو با # در <mat-menu> داده می شود.

app.component.html

<button mat-button [matMenuTriggerFor] = "menu">Menu</button> 
<mat-menu #menu = "matMenu"> 
   <button mat-menu-item> File </button> 
   <button mat-menu-item> Save As </button>
</mat-menu>

تصویر زیر در مرورگر نمایش داده می شود

با کلیک بر روی Menu آیتم های داخل آن نمایش داده می شود

SideNav

برای افزودن sidenav به <mat-sidenav-container></mat-sidenav-container> نیاز داریم. <mat-sidenav></mat-sidenav> به عنوان یک کودک به ظرف اضافه می شود. Div دیگری اضافه شده است که با استفاده از (click)=”sidenav.open()” sidenav را فعال می کند.

app.component.html

<mat-sidenav-container class="example-container" fullscreen> 
   <mat-sidenav #sidenav class = "example-sidenav"> 
      Angular 7 
   </mat-sidenav> 
   <div class = "example-sidenav-content"> 
      <button type = "button" mat-button (click) = "sidenav.open()"> 
         Open sidenav 
      </button> 
   </div> 
</mat-sidenav-container>

app.component.css

.example-container { 
   width: 500px;  
   height: 300px; 
   border: 1px solid rgba(0, 0, 0, 0.5); 
}
.example-sidenav { 
   padding: 20px; 
   width: 150px; 
   font-size: 20px;
   border: 1px solid rgba(0, 0, 0, 0.5); 
   background-color: #ccc; 
   color:white; 
}

در زیر نمایش منو و sidenav در مرورگر وجود دارد –

اگر روی Open Sidenav – کلیک کنیم، پنل زیر در سمت چپ باز می شود

datepicker

اجازه دهید اکنون با استفاده از مواد، یک تاریخ‌گزین اضافه کنیم. برای افزودن datepicker، باید ماژول های مورد نیاز برای نمایش datepicker را وارد کنیم.

در app.module.ts، ماژول زیر را مطابق شکل زیر برای datepicker – وارد کرده ایم

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

در اینجا، ما ماژول هایی مانند MatDatepickerModule، MatInputModule و MatNativeDateModule را وارد کرده ایم.

اکنون، app.component.ts مانند شکل زیر است –

import { Component } from '@angular/core'; 
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', s
   tyleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   constructor() {} 
}

app.component.html مطابق شکل زیر است –

<mat-form-field>
   <input matInput [matDatepicker] = "picker" placeholder = "Choose a date"> 
   <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

css جهانی در style.css اضافه شد –

/* You can add global styles to this file, and also 
import other style files */ 
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body { 
   font-family: Roboto, Arial, sans-serif; 
   margin: 10; 
}
.basic-container { 
   padding: 30px; 
}
.version-info { 
   font-size: 8pt; 
   float: right;
}

datepicker مطابق شکل زیر در مرورگر نمایش داده می شود

Datepicker

Choose Date

منبع.

لیست جلسات قبل آموزش انگولار ۷

برچسب ها : آموزش انگولار 7 آموزش طراحی وب سایت

نویسنده مطلب erfan molaei

آموزش متریال ها در انگولار ۷

آموزش متریال ها در انگولار ۷

منو

SideNav

datepicker

لیست جلسات قبل آموزش انگولار ۷

دیدگاه شما

بدون دیدگاه

آموزش متریال ها در انگولار ۷

منو

SideNav

datepicker

لیست جلسات قبل آموزش انگولار ۷

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه