مرجع رسمی مقالات طراحی اپ موبایل

بهترین مرجع مقالات اموزشی طراحی اپلیکیشن

مرجع رسمی مقالات طراحی اپ موبایل

بهترین مرجع مقالات اموزشی طراحی اپلیکیشن

  • ۰
  • ۰

در‌این نوشته‌ی‌علمی، ما خاطر میگیریم یک پروژه تازه طراحی اپلیکیشن در مشهد انگولار 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

با اجرای توفیق آمیز فرمان بالا، این در مرورگر نماد داده می‌گردد،

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی