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

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

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

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

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

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

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

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

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

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

angular material 7 toolbar 6378 تصویر

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

<mat-toolbar> یک دستورالعمل انگولار است که به منظور ایجاد ToolBar هایی با استایل متریا دیزاین مورد استفاده قرار می گیرد.

بخش های یک ToolBar:

  • <mat-toolbar> : نشان دهنده ظرف (container) اصلی است.
  • <mat-toolbar-row> : یک سطر جدید به نوار ابزار اضافه می کند.

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

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

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

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

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

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

نتییجه

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

angular material 7 toolbar 6378 1 تصویر

جزئیات

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

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