متریال (Materials) در انگولار ۶ – آموزش Angular 6

  • یکشنبه ۷ بهمن ۱۳۹۷
  • بازدید ۱۵۸ نفر

angular 6 materials 5721 تصویر

متریال (Materials) در انگولار ۶

Materials در انگولار ماژول های آماده زیادی برای زیبا سازی ظاهر و UI پروژه ها ارائه می کند. از جمله موارد ارائه شده می توان به Autocomplete، Datepicker، Slider، Menus، Grids و Toolbar اشاره کرد.

برای استفاده از متریال در انگولار باید دو بسته material و cdk را نصب کنید. برای نصب این دو بسته می توانید از دستور زیر استفاده کنید:

بعد از اجرا شدن دستور فوق اگر به فایل package.json نگاه کنید، بسته های مورد نظر نصب شده اند:

حال باید ماژول مربوط به متریال را به فایل app.module.ts اضافه کنیم:

در کد فوق ما ماژول های MatButtonModule، MatMenuModule، MatSidenavModule را import و به بخش imports اضافه کرده ایم.

محتوای فایل app.component.ts را به صورت زیر تغییر دهید:

حال برای اینکه استایل Material بر روی قالب کل برنامه اعمال شود، فایل کد زیر را به فایل styles.css اضافه کنید:

حال می توانید از ماژول های متریال در قالب برنامه استفاده کنید.

مانند نمونه زیر:

در مثال فوق ما Menu و SideNav را اضافه کرده ایم در ادامه این دو تگ را بررسی می کنیم.

تگ Menu

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

تگ SideNav

در کد بالا تگ <mat-sidenav-container></mat-sidenav-container> یک sidenav ایجاد می کند. تگ <mat-sidenav></mat-sidenav> آیتم ها (فرزندان)  sidenav را مشخص می کند. برای نمایش sidenav یک دکمه نیز اضافه شده است.

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

angular 6 materials 5721 1 تصویر

پس از کلیک بر روی opensidenav نوار جانبی مانند شکل زیر نمایش داده می شود:

angular 6 materials 5721 2 تصویر

پس از کلیک بر روی دکمه menu آیتم های موجود در آن مانند شکل زیر نمایش داده می شود:

angular 6 materials 5721 3 تصویر

حال با استفاده از متریال، یک کنترل datepicker اضافه می کنیم. برای استفاده از این کنترل باید ماژول های مورد نیاز آن را به فایل app.module.ts اضافه کینم، مانند نمونه زیر:

در کد فوق ما ماژول های MatDatepickerModule، MatInputModule و MatNativeDateModule را وارد کرده ایم.

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

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

در زیر نحوه نمایش datepicker را مشاهده می کنید:

angular 6 materials 5721 4 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

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