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

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

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

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

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

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

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

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

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

  • جمعه ۱۲ شهریور ۱۴۰۰
  • بازدید ۸۵ نفر

angular material 7 badge 6405 تصویر

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

<mat-badge> یک دستورالعمل انگولار است که به منظور ایجاد Badge مورد استفاده قرار می گیرد. Badge یک توصیف کننده حالت کوچک برای یک عنصر مربوط به UI است. برای مثال تعداد اعلان هایی که در کنار آیکون اعلانات در برخی از برنامه ها نمایش داده می شود.

در این بخش چگونگی استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

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

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

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

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

نتیجه

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

angular material 7 badge 6405 1 تصویر

جزئیات

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

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