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

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

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

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

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

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

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

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

کنترل List در انگولار متریال 7 – آموزش انگولار متریال

تصویر angular-material-7-list_6391 کنترل List در انگولار متریال 7 – آموزش انگولار متریال

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

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

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

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

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

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

نتیجه

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

تصویر angular-material-7-list_6391_1 کنترل List در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

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

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