* نکته: پروژه انگیولار متریال ۲ در زمان نوشتن این مقاله به تازگی نسخه بتا ۵ را ارائه داده و همچنان در حال توسعه است. این بدان معنی است که ممکن است همه چیز به سرعت تغییر یابد.
مقدمه
انگیولار متریال ۲ همانند انگیولار متریال یک، تمامی المانهای مورد نیاز برای طراحی یک برنامه تک صفحه‌ای را به راحتی فراهم می‌کند (هرچند تمامی المانهای آن در نسخه بتا پیاده سازی نشده‌اند). خبر خوب اینکه، اکثر کامپوننتهای ارائه شده در انگیولار متریال ۲ از قالب راست به چپ پشتیبانی می‌کنند و اعمال این قالب به سادگی اضافه کردن خصوصیت dir یک المان به rtl است.
در صفحه گیت‌هاب انگیولار متریال ۲ آمده‌است که انگیولار متریال ۲، واسط‌های کاربری با کیفیت بالا را ارائه می‌دهد و در ادامه منظورش را از «کیفیت بالا»، اینگونه بیان می‌کند:
- بین‌المللی
و قابل دسترس برای همه به نحوی که تمامی کاربران می‌توانند از آنها استفاده کنند
(عدم مشکل در چند زبانه بودن و پشتیبانی از قالب راست به چپ و چپ به راست) .
- دارای APIهای ساده برای توسعه دهندگان.
- رفتار مورد انتظار و بدون خطا در تمامی موردهای کاری
-
تست تمامی رفتارها توسط تست یکپارچگی (unit test ) و تست واحد ( integration test )
-
قابلیت سفارشی سازی در چارچوب طراحی متریال
-
بهره‌وری بالا
-
کد تمیز و مستندات خوب
شروع کار با انگیولار متریال ۲
قدم اول: نصب angular-material و hammerjs
برای شروع بایستی Angular Material و angular animations و hammer.js را توسط npm به صورت زیر نصب کنید.
npm install --save @angular/material @angular/animations
npm install --save hammerjs
angular/material@: بسته مربوط به انگیولار متریال دو را نصب خواهد کرد.
angular/animations@: این بسته امکاناتی جهت ساخت افکت‌های ویژه هنگام تغییر صفحات، یا بارگذاری المنت‌ها را از طریق کدهای css نوشته شده، به راحتی امکان‌پذیر می‌کند.
Hammerjs: برخی از کامپوننتهای موجود در انگیولار متریال ۲ وابسته به کتابخانه Hammerjs هستند. (از جمله md-slide-toggle و md-slider, mdTooltip)
قدم دوم: معرفی کتابخانه‌های خارجی به angular-cli.json
"scripts": [ "../node_modules/hammerjs/hammer.min.js" ],
قدم سوم: افزودن Angular Material به ماوژل اصلی برنامه انگیولار
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
قدم چهارم: افزودن تم و آیکون
همراه با نصب Angular Material تعدادی تم از قبل ساخته شده نیز نصب خواهند شد که شامل یکسری استایل با رنگهای مشخصی هستند. از جمله این تم‌ها عبارتند از:
- indigo-pink
- deeppurple-amber
- purple-green
- pink-bluegrey
همچنین با استفاده از Material Design icons نیز با استفاده از تگ <md-icon> به آیکونهای متریال نیز می‌توان دسترسی داشت.
برای افزودن آیکونهای متریال و همچنین انتخاب یک تم از قبل ساخته شده دو خط زیر را به فایل style.css اصلی برنامه اضافه کنید.
@import '~https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
نکته‌ای که در تگ <md-icon> وجود دارد این است که این تگ انواع فونت‌ها و آیکونهای svg را نیز پشتیبانی می‌کند. استفاده از آیکونهای متریال یکی از قابلیت‌های این تگ محسوب می‌شود.
برای اطلاعات بیشتر از نحوه ساخت تم سفارشی می‌توانید این لینک را دنبال کنید.
قدم آخر: انگیولار متریال آماده است!
با انجام مراحل بالا اکنون می‌توانید به راحتی از کامپوننتهای متریال استفاده کنید. کافی است کدهای زیر را به فایل app.component.html اضافه کنید و یک قالب ساده برای برنامه خود بسازید.
<md-sidenav-container>
<md-sidenav #end align="end" opened="true" mode="side">
<md-toolbar color="accent">
<div>
<md-toolbar-row>
<img src="https://material.angular.io/favicon.ico" style="height:50px;margin-top: 2px; margin-bottom: 2px;">
<span>
برنامه من
</span>
</md-toolbar-row>
</div>
</md-toolbar>
<md-nav-list>
<md-list-item [routerLink]="['/']">
<div>
<div></div>
<md-icon role="img" aria-label="home">home</md-icon>
<span>خانه</span>
</div>
</md-list-item>
</md-nav-list>
<md-nav-list>
<md-list-item [routerLink]="['/registries']">
<div>
<div></div>
<md-icon role="img" aria-label="forms">content_paste</md-icon>
<span>فرم</span>
</div>
</md-list-item>
</md-nav-list>
<md-nav-list>
<md-list-item href="/charts">
<div>
<div></div>
<md-icon role="img" aria-label="charts">show_chart</md-icon>
<span>نمودارها</span>
</div>
</md-list-item>
</md-nav-list>
</md-sidenav>
<header>
<md-toolbar color="primary">
<button md-icon-button (click)="end.toggle()">
<md-icon>menu</md-icon>
</button>
<span>داشبورد</span>
<button md-icon-button [md-menu-trigger-for]="menu">
<md-icon>person</md-icon>
</button>
</md-toolbar>
<md-menu x-position="before" #menu="mdMenu">
<button md-menu-item>تنظیمات</button>
<button md-menu-item>خروج</button>
</md-menu>
</header>
<main>
<router-outlet></router-outlet>
</main>
</md-sidenav-container>
<span>
<button md-fab>
<md-icon>check circle</md-icon>
</button>
</span> همچنین کدهای css زیر را به فایل اصلی style.css اضافه کنید.
html, body, material-app, md-sidenav-container, .my-content {
margin: 0;
direction: rtl;
width: 100%;
height: 100%;
}
.mat-button-toggle,
.mat-button-base,
.mat-button,
.mat-raised-button,
.mat-fab,
.mat-icon-button,
.mat-mini-fab,
.mat-card,
.mat-checkbox,
.mat-input-container,
.mat-list,
.mat-menu-item,
.mat-radio-button,
.mat-select,
.mat-list .mat-list-item .mat-list-item-content,
.mat-nav-list .mat-list-item .mat-list-item-content,
.mat-simple-snackbar,
.mat-tab-label,
.mat-slide-toggle-content,
.mat-toolbar,
.mat-tooltip { font-family: 'Iranian Sans', Tahoma !important;
}
md-sidenav {
width: 225px;
max-width: 70%;
}
md-sidenav md-nav-list {
display: block;
}
md-sidenav md-nav-list :hover {
background-color: rgb(250, 250, 250);
}
md-sidenav md-nav-list .md-list-item {
cursor: pointer;
}
.side-navigation {
padding-top: 0;
}
md-nav-list.side-navigation a[md-list-item] > .md-list-item > span.title {
margin-right: 10px;
}
md-nav-list.side-navigation a[md-list-item] > .md-list-item {
-webkit-font-smoothing: antialiased;
letter-spacing: .14px;
}
md-list a[md-list-item] .md-list-item, md-list md-list-item .md-list-item, md-nav-list a[md-list-item] .md-list-item, md-nav-list md-list-item .md-list-item {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
height: 48px;
padding: 0 16px;
}
button.my-fab {
position: absolute;
right: 20px;
bottom: 10px;
}
md-card {
margin: 1em;
}
md-toolbar-row {
justify-content: space-between;
}
.done {
position: fixed;
bottom: 20px;
left: 20px;
color: white;
}
md-nav-list.side-navigation a[md-list-item] {
position: relative;
}
md-list a[md-list-item], md-list md-list-item, md-nav-list a[md-list-item], md-nav-list md-list-item {
display: block;
}
md-list a[md-list-item], md-list md-list-item, md-nav-list a[md-list-item], md-nav-list md-list-item {
color: #000;
}
md-nav-list a {
text-decoration: none;
color: inherit;
}
a {
color: #039be5;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.no-padding {
padding: 0 !important;
}
به همین راحتی برنامه نمونه با طراحی متریال آماده است.
