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

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

angular material 7 slide toggle 6371 تصویر

کنترل Slide Toggle در انگولار متریال

<mat-slide-toggle> یک دستورالعمل انگولار است که به منظور ایجاد کنترل Slide Toggle استفاده می شود. این کنترل مانند کنترل چک باکس می توانند فعال یا غیرفعال باشد اما از لحاظ ظاهری و Context با آن متفاوت است.

در این بخش چگونگی ایجاد و استفاده از کنترل <mat-slide-toggle> در انگولار را بررسی خواهیم کرد.

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

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

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

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

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

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

نتییجه

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

angular material 7 slide toggle 6371 1 تصویر

جزئیات

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

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