در‌این نوشته‌ی‌علمی، ما خاطر میگیریم یک پروژه تازه طراحی اپلیکیشن در مشهد انگولار 11 با به کار گیری از فرمان ng new بسازیم و آن‌گاه Material Design را با به کار گیری از فرمان ng add نصب کنیم. آن‌گاه یک مثال بی آلایش matTabs در ویژوال استودیو کد می سازیم.
مرحله 1
با استعمال از دستورها ذیل، یک تهیه پروژه انگولار بسازید یا این که اپلیکیشن انگولار خویش را تولید نمائید.
ng new samplemat
مرحله 2
یک ترمینال تازه را گشوده کرده و اوامر پایین را ایفا فرمایید.
Angular Material را نصب نمایید،
ماژول Material را در اپ خویش نصب فرمایید.
ng add @angular/material
فرمان Angular Material ،ng add را نصب می‌نماید، Component Dev Kit (CDK) و Angular Animations
آنها برخی از سوال ها را راجع‌به نصب می پرسند،
· یک اسم تم از پیش تشکیل شده یا این که \"سفارشی\" برای custom theme تعیین فرمائید:
میتوانید از تم‌های از پیش تشکیل شده material design تعیین نمایید یا این که یک تم سفارشی گسترش پذیر تهیه نمایید.
· استایل های تایپوگرافی سراسری Angular Material را تهیه و تنظیم نمائید:
چه مدل های تایپوگرافی سراسری را در اپلیکیشن خویش ایفا فرمایید یا این که خیر.
· برنامه کودک های مرورگر را برای Angular Material تهیه نمائید:
وارد کردن BrowserAnimationsModule در نرم افزار یتان سیستم کارتون انگولار را فعال می‌نماید. با رد کردن این اکثر کارتون های Angular Material غیرفعال میشوند.
امر ng add همینطور کانفیگ‌های تحت را نیز اعمال میدهد:
تعلق‌های پروژه را به package.json اضافه می‌نماید.
فونت Roboto را به index.html اضافه می‌نماید.
آیکون فونت Material Design را به index.html اضافه می‌نماید.
یکسری تا استایل CSS سراسری را به موردها پایین اضافه می‌نماید:
حذف مارجین از body
ست کردن height: 100% روی html و body
ست کردن Roboto تحت عنوان فونت نرم افزار
فعلا فعالیت ما مجموع شد‌ه‌است و Angular Material در حال حاضر برای استعمال در اپ ما کانفیگ شد‌ه‌است.
مرحله 3 - App.module.ts
درحال حاضر ما متریال را در app.module.ts اعلان میکنیم.
import { NgModule } from \'@angular/core\';
import { BrowserModule } from \'@angular/platform-browser\';
import { BrowserAnimationsModule } from \'@angular/platform-browser/animations\';
import {
MatTabsModule,
MatButtonModule,
MatToolbarModule
} from \'@angular/material\';
import { AppComponent } from \'./app.component\';
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, MatTabsModule, MatButtonModule, MatToolbarModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
مرحله 4
حال مخلوط را در App.component.html می‌نویسیم.
Material Tabs ui
Get the change event!
Tab 1
Tab 2
Get the tabs
Tab 1
Tab 2
Tab 3
مرحله 5
بعد از آن قادر خواهیم بود app.component.ts را گشوده کرده و و چندین کد را بنویسیم.
import { Component, OnInit, AfterViewInit, ViewChild, ViewChildren, QueryList } from \'@angular/core\';
import {MatTabGroup} from \'@angular/material\'
@Component({
selector: \'my-app\',
templateUrl: \'./app.component.html\',
styleUrls: [ \'./app.component.css\' ]
})
export class AppComponent implements OnInit, AfterViewInit {
ngOnInit() {
}
@ViewChildren(\"selectTabs\") selectTabs: QueryList
ngAfterViewInit() {
console.log(\'total tabs: \' + this.selectTabs.first._tabs.length);
}
tabChanged(tabChangeEvent: number) {
console.log(\'tab selected: \' + tabChangeEvent);
}
}
در style.scss
/* Add application styles & imports to this file! */
@import \'~@angular/material/theming\';
@include mat-core();
$candy-app-primary: mat-palette($mat-blue);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
مرحله 6
اکنون نرم‌افزار را انجام می کنیم
ng serve --port 1223
با اجرای توفیق آمیز فرمان بالا، این در مرورگر نماد داده می‌گردد،