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

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

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

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

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

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

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

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

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

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

angular material 7 slider 6369 تصویر

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

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

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

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

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

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

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

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

نتییجه

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

angular material 7 slider 6369 1 تصویر

جزئیات

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

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