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

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

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

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

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

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

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

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

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

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

angular material 7 expansion panel 6386 تصویر

پنل Expansion در انگولار متریال

<mat-expansion-panel> یک دستورالعمل انگولار است که به منظور ایجاد پنل های expandable (قابل گسترش) استفاده می شود.

بخش های یک پنل Expansion:

  • <mat-expansion-panel-header> : بخش هدر را نشان می دهد که شامل مختصری از محتویال پنل و یک کنترل برای باز و بسته کردن پنل است.
  • <mat-panel-title> : نشان دهنده عنوان پنل است.
  • <mat-panel-description> : نشان دهنده خلاصه ای از محتویات پنل است.
  • <mat-action-row> : نشان دهنده بخش مربوط به کنترل ها و یا Action های پنل است.

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

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

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

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

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

نتیجه

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

angular material 7 expansion panel 6386 1 تصویر

جزئیات

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

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