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

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

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

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

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

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

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

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

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

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

angular material 7 ripples 6420 تصویر

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

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

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

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

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

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

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

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

نتیجه

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

angular material 7 ripples 6420 1 تصویر

جزئیات

  • در ابتدا ما با استفاده از دستورالعمل mat-checkbox چند چک باکس ایجاد کرده و آن ها با استفاده از ngModel به متغیرهای تعریف شده در کلاس کامپوننت متصل کرده ایم.
  • سپس بخش نشان دهنده افکت Ripple را بر اساس مقدار متغیرهای موجود ایجاد نموده ایم.
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

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