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

  • سه شنبه ۱۲ شهریور ۱۳۹۸
  • بازدید ۳۶ نفر

angular7 materials 6669 تصویر

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

متریال (Materials) در انگولار ۷ ماژول های آماده زیادی برای زیبا سازی ظاهر و UI پروژه ها ارائه می کند. از جمله موارد ارائه شده می توان به Autocomplete، Datepicker، Slider، Menus، Grids و Toolbar اشاره کرد. برای استفاده از متریال در انگولار ۷ باید دو بسته material و cdk را نصب کنید. ما در بخش های قبلی CDK را نصب کرده ایم.

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

خروجی دستور فوق:

angular7 materials 6669 1 تصویر

بعد از اجرا شدن دستور فوق اگر به فایل package.json نگاه کنید، بسته های مورد نظر (@angular/material و @angular/cdk) نصب شده اند:

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

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

همچنین آن ها را به بخش imports نیز اضافه نموده ایم:

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

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

در ادامه از ماژول های متریال در فایل app.component.html استفاده خواهیم کرد:

تگ Menu

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

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

خروجی:

angular7 materials 6669 2 تصویر

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

angular7 materials 6669 3 تصویر

تگ SideNav

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

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

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

خروجی:

angular7 materials 6669 4 تصویر

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

angular7 materials 6669 5 تصویر

کنترل datepicker

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

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

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

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

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

CSS سراسری که به فایل style.css اضافه شده است:

خروجی برنامه:

angular7 materials 6669 6 تصویر

angular7 materials 6669 7 تصویر

angular7 materials 6669 8 تصویر

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

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