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

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

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

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

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

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

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

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

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

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

angular material 7 divider 6384 تصویر

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

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

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

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

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

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

نتیجه

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

angular material 7 divider 6384 1 تصویر

جزئیات

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

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