تمسازی در Angular 19 و Material MD3 - راهنمای گمشده
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت تمهای پویا با استفاده از custom properties ،color-scheme و ()color-mix، رنگهای نسبی و توابع ()CSS light-dark
- راهاندازی یک سیستم رنگی منعطف با استفاده از OKLCH و درک چگونگی نگاشت نقشهای رنگی به پالتهای طراحی
- ایجاد چندین تم و جابجایی بین آنها در زمان اجرا با پشتیبانی کامل از حالت روشن/تاریک
- استفاده همزمان از چندین تم در یک برنامه برای برجسته کردن زمینههای معنایی مختلف یا حالتهای کاربری
- استفاده از SCSS برای تولید پالتها، مدیریت استایلها و سازماندهی منطق تمسازی با mapها و mixinها
- سفارشیسازی کامپوننتهای Angular Material با بازنویسی tokenها و معرفی tokenهای طراحی خودتان
- استایلدهی تایپوگرافی و آیکونها، میزبانی فونتها به صورت self-host و ادغام SVGهای سفارشی با پشتیبانی کامل از تمسازی.
- ساخت یک سیستم تمسازی قابل استفاده مجدد برای هر اپلیکیشن Angular - نه فقط آنهایی که از Material استفاده میکنند.
پیشنیازهای دوره
- تجربه اولیه قبلی با Angular
- مقداری تجربه در Angular مدرن با signalها
- آشنایی با اصول CSS مانند انتخابگرها، رنگها و فونتها
- هیچ دانش قبلی از Angular Material مورد نیاز نیست.
توضیحات دوره
چه میشد اگر میتوانستید ظاهر کل اپلیکیشن خود را با یک رنگ واحد کنترل کنید؟ چه میشد اگر طراحی شما میتوانست به صورت خودکار با حالتهای روشن و تاریک تطبیق یابد؟ چه میشد اگر Angular Material واقعاً... منعطف احساس میشد؟
کشف کنید که چگونه CSS مدرن و آخرین نسخه Angular Material قابلیتهای تمسازی قدرتمند و منعطفی را آزاد میکنند. یاد بگیرید که یک سیستم تمسازی مقیاسپذیر و قابل استفاده مجدد برای اپلیکیشنهای Angular خود بسازید که با حالتهای روشن و تاریک سازگار است و از چندین پالت پشتیبانی میکند. با سفارشیسازی هر جنبه از Angular Material با وضوح و سهولت، کنترل کامل ظاهر و حس اپلیکیشن خود را در دست بگیرید.
چرا این دوره؟
- پوشش کامل استک تمسازی - از CSS مدرن تا SCSS و Angular Material
- ساختار دنیای واقعی و بهترین تجربیات که میتوانید بلافاصله در پروژههای خود اعمال کنید.
- دموهای عملی و کدهای قابل استفاده مجدد که در زمان شما صرفهجویی کرده و به شما کمک میکنند سریعتر بسازید.
- تدریس توسط یک مدرس با تجربه Angular با تمرکز بر وضوح، مفید بودن و تجربه توسعهدهنده
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان Angular که میخواهند اپلیکیشنهای حرفهای و صیقلخورده با تمهای سازگار ایجاد کنند.
- توسعهدهندگانی با دانش قبلی از نسخههای قبلی Angular Material که با تغییرات اخیر احساس سردرگمی میکنند.
- توسعهدهندگان Angular که به دنبال آزادسازی قدرت کامل سیستم تمسازی جدید Angular Material هستند.
- طراحانی که از نزدیک با توسعهدهندگان کار میکنند و خواهان کنترل بهتر بر رنگ، تایپوگرافی و پیادهسازی طرح بندی هستند.
تمسازی در Angular 19 و Material MD3 - راهنمای گمشده
-
مقدمه 05:03
-
آنچه باید بدانید 01:45
-
تمرین آنچه میاموزید 02:26
-
مقدمهای بر CSS مدرن 01:45
-
پراپرتیهای سفارشی در CSS 08:31
-
اعمال پراپرتی سفارشی با استفاده از تابع `var` 06:43
-
استفاده از `var` در پراپرتیهای ترکیبی 05:03
-
خودتان امتحان کنید: تابع 'var' 04:15
-
سیستم رنگ: پالتها و تمها 07:37
-
مقدمهای بر فضاهای رنگی: RGB 06:02
-
نمایش پالتهای RGB 08:03
-
خودتان امتحان کنید: پالتهای RGB 00:21
-
فضای رنگی برای انسانها: HSL 09:36
-
خودتان امتحان کنید - پالتهای HSL 01:00
-
فضای رنگی برای تمها: OKLCH 13:49
-
خودتان امتحان کنید: OKLCH 06:03
-
فضاهای رنگی بیشتر 07:46
-
سینتکس جدید رنگ و آلفا 03:47
-
مقدمهای بر تمهای پویا 01:45
-
تابع `color-mix` 09:01
-
ترکیب در فضاهای رنگی مختلف 08:58
-
پالت پویا با استفاده از color-mix 06:59
-
خودتان امتحان کنید: color-mix 01:24
-
رنگهای نسبی با استفاده از کلمه کلیدی 'from' 10:16
-
استفاده از تابع calc با رنگهای نسبی 06:22
-
استفاده از min، max و clamp با رنگهای نسبی 04:29
-
ساخت پالتها و اعمال یک تم 07:27
-
خودتان امتحان کنید - پالتها با استفاده از رنگهای نسبی 02:59
-
روشن و تاریک: پراپرتی `color-sheme` 05:27
-
رنگهای شرطی: مدیا کوئری `prefers-color-sheme` 05:31
-
رنگهای شرطی: تابع `light-dark` 07:26
-
خودتان امتحان کنید: طرحهای رنگی تاریک و روشن 01:48
-
معرفی تمرین 01:48
-
مقدمهای بر اپلیکیشن 04:08
-
ایجاد پراپرتیهای رنگ سفارشی 06:20
-
ایجاد ورودیهای پالت 05:39
-
استفاده از ورودیهای پالت در کامپوننتها 06:41
-
تنظیم پالتهای معنایی برای اعلانها 06:14
-
مقدمهای بر Scss 01:36
-
پیشپردازندههای استایل چه هستند؟ 05:10
-
کدنویسی همراه: زمین بازی Scss ما 05:51
-
تودرتویی در Scss 07:20
-
انتخابگر '&' (والد) 03:27
-
استفاده از متغیرهای Scss 06:42
-
اشکالزدایی در ScSS 04:50
-
درونیابی عبارت 07:41
-
توابع در Scss 07:53
-
استفاده از ماژولهای داخلی 05:19
-
لیستها در Scss 11:10
-
Mapها در Scss 07:17
-
Mixinها در Scss 06:36
-
کنترل جریان در Scss با استفاده از if@ و for@ 06:28
-
ماژولها و Partialها 09:10
-
خلاصه 01:15
-
مقدمهای بر تمسازی در Angular 01:43
-
آشنایی با پروژه دمو 07:43
-
بازنویسی ورودیهای پالت برای استفاده از رنگهای نسبی 10:33
-
تنظیم پیکربندی Scss 05:22
-
انتقال استایلهای سراسری به Mixinها 05:12
-
پیادهسازی سیستم رنگی و Mixinهای تم 11:03
-
خودکارسازی Mixin سیستم رنگی - بخش 1 11:37
-
خودکارسازی Mixin سیستم رنگی - بخش 2 13:44
-
ایجاد سرویس تم 13:00
-
اعمال وضعیت تم بر روی DOM 06:25
-
اتصال رابط کاربری انتخاب تم به سرویس 09:20
-
درک Tokenهای طراحی 08:17
-
استایلدهی ویجتها بر اساس Tokenهای طراحی 14:05
-
نکته مهم! 02:08
-
مقدمهای بر تمسازی Angular Material 02:31
-
داستان متریال دیزاین 02:52
-
MD2 و MD3 به چه معناست؟ 09:36
-
شروع کار با Angular Material 09:18
-
بهبود IntelliSense برای ایمپورت های Angular Material 08:24
-
استفاده از Mixin مربوط به mat.theme 06:47
-
مقایسه تمهای MD3 با نسخههای قبلی 06:36
-
استفاده از Tokenهای طراحی سیستم 07:13
-
امتحان کنید: راهاندازی تمها و استفاده از توکنهای وب 07:17
-
پالتهای تم 05:17
-
متغیرهای سیستم رنگ 03:38
-
پراپرتی theme-type 05:04
-
تمهای سراسری و محلی 05:58
-
امتحان کنید: تمهای محلی 03:59
-
استفاده از سایهها و ارتفاعات تم 03:30
-
درک چگالی تم 10:33
-
امتحان کنید: چگالی تم و سایهها 01:24
-
مقدمهای بر سفارشیسازی در Angular Material 01:55
-
چرا برای تولید تمها به Schematicها نیاز داریم؟ 05:37
-
شماتیکهای تم سفارشی 09:04
-
تمهای سفارشی با فایلهای SCSS 11:06
-
افزودن Tokenهای سیستم سفارشی با استفاده از Mixin پوششی 10:09
-
بازنویسی تم 09:44
-
امتحان کنید - بازنویسی تم 01:03
-
بازنویسی Tokenهای کامپوننت Material 06:57
-
سفارشیسازی کامپوننت Card 11:51
-
امتحان کنید - سفارشیسازی نوار ابزار 06:49
-
چگونه دکمه را در رنگهای Accent یا Warn نمایش دهیم؟ 13:20
-
امتحان کنید: دکمههای Accent و Warn 01:17
-
مقدمهای بر تایپوگرافی و آیکونها 02:04
-
استایلهای تایپوگرافی در Material MD3 02:39
-
استفاده از متغیرهای سیستم تایپوگرافی 07:06
-
سفارشیسازی تایپوگرافی تم 06:02
-
امتحان کنید: تایپوگرافی 01:20
-
میزبانی خودکار فونتها در پوشه عمومی ما 15:41
-
میزبانی خودکار فونتها با استفاده از npm 09:35
-
درک سیستم آیکونها در Material 06:27
-
درک مجموعههای فونت mat-icon 07:35
-
امتحان کنید - آیکونها و مجموعههای فونت 01:18
-
"نمادهای متریال" جدید! 07:45
-
سفارشیسازی تنوع نمادها 07:09
-
امتحان کنید - نمادهای متریال 05:34
-
آیکونهای SVG سفارشی 13:47
-
امتحان کنید - آیکونهای SVG سفارشی 04:09
-
سایر ویژگیهای رجیستری آیکون 05:21
-
چکلیست Angular Material MD3 05:44
-
خلاصه دوره 02:36
-
سخنان پایانی مهم 01:05
مشخصات آموزش
تمسازی در Angular 19 و Material MD3 - راهنمای گمشده
- تاریخ به روز رسانی: 1404/10/04
- سطح دوره:همه سطوح
- تعداد درس:116
- مدت زمان :12:10:20
- حجم :6.53GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy