Angular7: تم پویا بدون نیاز به کتابخانه

مفهوم ظاهر بندی صفحات از خیلی قبل تر از Angular وجود داشته جوری که  به کاربر توانایی انتخاب ظاهر بدهد و البته کاربر احساس کند که محصول شما یک ارزش فوق العاده بالایی دارد . خوبی این ویژگی این است که کاربر تجربه محلی خوبی خواهد داشت و زمان نگه داری توسط توسعه دهنده را هم کاهش می دهد

Angular نمونه طراحی

اما چطور می توانید صفحه ای مشابه این تصویر در Angular داشته باشید ؟

چرا Sass به تنهایی کار نمی کند ؟

اگر چه Sass می تونه به ما کمک کند تا یه همچین پوسته ای را ایجاد کنیم اما نکته اینه که این توسط جاوا اسکریپت دستکاری نمی شه ما به جاوا اسکریپت احتیاج داریم تا بتونیم به صورت پویا مقدار متغیرهای خودمون را تغییر بدیم .

چرا Material به تنهایی کار نمی کند ؟

زمانی که Mterial ریلیز شد توسعه دهندگان به سمت استفاده از  کتابخانه های آن هجوم آوردند تا از کامپوننت های قابل استفاده مجدد آن بهره بگیرند( در اینجا به built-in اشاره نشده ) .Material با built -in امدند اما به دو دلیل ممکن است درست کار نکنند .

  1. Material  رنگ های پیش فرض خود را دارد و اگر میخواهید رنگ دلخواه خود را داشته باشید یا باید  با ابزار سه بعدی تم دلخواه خود را از نو بسازید یا اون رو به mat-pallete منتقل کنند که این اصلا جالب نیست چون که ,وابسنگی خارجی ایجاد می کند و توانایی تغییر تم بدون لمس کد را محدود می کند .
  2. خیلی از توسعه دهنده ها دوست ندارند که از اجزای آماده استفاده کنند و دوست دارند که قالب تم خود را تولید کنند .

راه حل چیه ؟ Sass +css Variable!

اگر تا به حال از خواص  native css custom استفاده نکردید که ما بهش متغیر می گوییم پیشنهاد میکنم که این مقاله را مطالعه کنید . میتونه به شما کمک کنید که شروع به یادگیری کنید . دلیل استفاده ازش اینه که متغیرهای Css توسط جاوا اسکریپت می تونه دستکاری بشه . شما میتونید از یک فرم استفاده کنید که متغیرهای  Css را به Sass map  انتقال دهد و در طول برنامه ازش استفاده کنید .

بیایم ببینیم !

پیاده سازی

  1. از کتابخونه های خارجی استفاده نمی کند.
  2. به کامپوننت های چندگانه این اجازه رو می دهد که از طریق فرم استایل خود را تغییر بدهند .
  3. فرم رو به صورت یک شی ذخیره می کند تا بتواند در دیتابیس یا در فروشگاه محلی ذخیره شود .
  4. می تواند یک شی خارجی را به عنوان یک سبک پیش فرض بارگزاری کند .

برای دیدن دیمو اینجا کلیک کنید . و از این لینک می تونید به stackbilitz دسترسی داشته باشید .

 

شگفت انگیز

magic

مفهوم اصلی پشت این تصویر ترکیب Sass map و متغیرهای Css است .

 

theme css

این تابع متغیر بومی css را از global Sass map برمی گردونه .

function.scss

کامپوننت ها می توانند این دو فایل را بخوانند تا میزبان یک متغیر پویا باشد که بعد از فرم دوباره تغییر می کند.

card.component.scss

رنگ پس زمینه کارد #FFFFFF و رنگ متن #CCCCCC است .

 

چطور می توانیم مقدار متغیرها رو تغییر بدهیم؟

 

theme-picker.components.ts

globaloverride چک میکنه که اگر یک مقدار مشخص وجود داشت هر متغیر CSS  را با مقدار ورودی جدید جایگزین میکند .

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *