آموزش انگولار متریال

مباحث پایه انگولار متریال

Form Controls در انگولار متریال

Navigation در انگولار متریال

Layout در انگولار متریال

Buttons - Indicators در انگولار متریال

Popups - Modals در انگولار متریال

Data Table در انگولار متریال

کنترل Menu در انگولار متریال ۷ – آموزش انگولار متریال

  • یکشنبه ۷ شهریور ۱۴۰۰
  • بازدید ۱۱۶ نفر

angular material 7 menu 6373 تصویر

کنترل Menu در انگولار متریال

<mat-menu> یک دستورالعمل انگولار است که به منظور ایجاد منو با استایل متریال دیزاین مورد استفاده قرار می گیرد. در این بخش چگونگی ایجاد و استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat- menu> تغییر می دهیم.

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

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

 نتییجه

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

angular material 7 menu 6373 1 تصویر

جزئیات

  • در ابتدا ما دو منو با استفاده از دستورالعمل mat-menu ایجاد کردیم.
  • سپس منوها را توسط matMenuTriggerFor و شناسه هر کدام به دکمه ها بایند کرده ایم.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

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