لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش طراحی اجزای رابط کاربری پیشرفته مواد: دوره کامل
- آخرین آپدیت
Advanced Material UI Component Styling: The Complete Course
نکته:
ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:
به استایل پیشرفته Material-UI Component Styling: The Complete Course خوش آمدید.
این دوره به شما در طراحی اجزای نسخه 5 MUI مهارت می دهد. شما یاد خواهید گرفت که برخی از سختترین مؤلفهها، مانند Data Grid، Autocomplete، و Date Picker را انجام دهید.
با هم DOM را بررسی میکنیم و سیستم کلاس پیشفرض را که MUI استفاده میکند و نحوه استفاده از این کلاسها برای ایجاد انتخابگرهای تودرتوی پیشرفته را کشف میکنیم. به طور حیاتی، ما همچنین بهترین موارد استفاده را برای sx prop، API سبک و تم را یاد خواهیم گرفت.
در اینجا نگاهی اجمالی به برخی از دانش MUI و تخصص نحوی که این دوره شامل می شود آورده شده است:
استفاده از طرح زمینه در API سبک
استفاده از گزینهها در API سبک
ارسال ابزارها به API استایل داده شده
نقاط شکست SX
SX شناور
طرح زمینه SX
انتخابگرهای تودرتو SX
رنگهای پالت تم سفارشی
جزء طرح زمینه لغو می شود
انواع تم سفارشی
استفاده از انتخابگرهای تو در تو در TextField برای تغییر حاشیه، شناور و سبک فوکوس
getOptionLabel، renderInput و renderOption را تکمیل خودکار کنید
استایل مولفه، انتخاب چندگانه و رندر گزینه سفارشی را انتخاب کنید
DatePicker renderInput، inputProps، popperProps
هر زیر جزء فرم توضیح داده شده است
موبایل پاسخگو در MUI - انتقال، پرسشهای رسانه، و موارد دیگر
طرح بندی های یک بعدی با مولفه Stack
طرحبندیهای دو بعدی با Grid
همه چیز انعطاف پذیر است - جهت، محتوا را توجیه می کند، موارد را تراز می کند، و موارد دیگر
ستونها، مؤلفهها و گزینههای نوار ابزار شبکه داده
استایل دادن به شبکه داده با انتخابگرهای تودرتو
جدول MUI سفارشی
استفاده از قلابهای React در پروژه MUI
پس این دوره را بگذرانید و دیگر از هیچ مؤلفه MUI نترسید!
تکلیف:
پروژه کلاس شما ساختن یک برنامه کامل با استفاده از اجزای MUI است.
پروژه شما باید شامل موارد زیر باشد:
پیمایش/مسیریابی
یک فرم و اجزای فرم MUI
شبکه و کارتهای MUI
جدول MUI
MUI DataGrid
طراحی پاسخ تلفن همراه در MUI
ویدئوی "بخش 1.1 - آنچه را که خواهیم ساخت" را مرور کنید تا نمونه ای از یک پروژه تکمیل شده را مشاهده کنید.
شروع به کار:
در ویدئوی "بخش 1.2 - اسکریپت ها و سازماندهی فایل"، نحوه شروع پروژه را مورد بحث قرار می دهم. این شامل موارد زیر است:
استفاده از یک IDE
استفاده از create-react-app برای شروع برنامه
کتابخانههای کد دیگری مورد نیاز است
این پروژه تکمیلشدهای دارد که با هم در ویدیوهای دوره ایجاد میکنیم. من شما را تشویق می کنم که در پروژه خود خلاق باشید و ویژگی های سفارشی را اضافه کنید.
اشتراک گذاری کار خود:
با آپلود کردن در بخش "پروژه شما"، برنامه نهایی و تصاویر پیشرفت خود را با کلاس به اشتراک بگذارید. اگر سؤالی دارید یا به نکات بیشتری نیاز دارید، لطفاً به من بگویید!
سرفصل ها و درس ها
درس ها
Lessons
بخش 2.7 - ارسال فرم و هشدار
Section 2.7 - Form Submit and Alert
بخش 14.2 - سلول های مؤلفه در شبکه داده MUI
Section 14.2 - Component Cells in the MUI Data Grid
بخش 2.5 - فاصله اجزاء در فرم ها
Section 2.5 - Component Spacing in Forms
بخش 5.3 - انتخاب سبک کامپوننت پیشرفته
Section 5.3 - Advanced Select Component Styling
بخش 1.3 - MUI AppBar و عملکرد کشو
Section 1.3 - MUI AppBar and Drawer Functionality
بخش 2.6 - مدیریت رویدادهای فرم
Section 2.6 - Form Event Handlers
بخش 1.1 - آنچه ما خواهیم ساخت
Section 1.1 - What We Will Build
بخش 2.1 - مقدمه ای بر فرم ها
Section 2.1 - Intro to Forms
بخش 3.3 - جداول MUI
Section 3.3 - MUI Tables
بخش 8.4 - سفارشی کردن نقاط شکست تم
Section 8.4 - Customizing Theme Breakpoints
بخش 10.1 - چیدمان های عمودی و افقی با مولفه پشته
Section 10.1 - Vertical and Horizontal Layouts with the Stack Component
بخش 12.2 - اندازه شبکه، سبک و تراز
Section 12.2 - Grid Size, Style, and Alignment
بخش 4.3 - درک JSX، DOM و اجزای ترکیبی
Section 4.3 - Understanding JSX, the DOM, and Compositional Components
بخش 3.4 - MUI DataGrids
Section 3.4 - MUI DataGrids
بخش 15.1 - افزودن نقاط شکست به اجزا
Section 15.1 - Adding Breakpoints to Components
بخش 3.5 - گره زدن همه با هم
Section 3.5 - Tying It All Together
بخش 2.2 - داده ها و انواع
Section 2.2 - Data and Types
بخش 13.1 - استفاده از جدول و استایل پیشرفته
Section 13.1 - Advanced Table Use and Styling
بخش 14.4 - مرتبسازی و فیلتر شبکه دادهها
Section 14.4 - Data Grid Sort and Filter
بخش 12.3 - فاصله شبکه
Section 12.3 - Grid Spacing
بخش 6.1 - هر نحو SX Prop توضیح داده شده است
Section 6.1 - EVERY SX Prop Syntax Explained
بخش 5.1 - یک ظاهر طراحی پیشرفته TextField
Section 5.1 - Advanced TextField Styling
بخش 5.4 - لوازم و استایل پیشرفته DatePicker
Section 5.4 - Advanced DatePicker Props and Styling
بخش 7.1 - نحوه ایجاد کامپوننت های سبک
Section 7.1 - How to Create Styled Components
بخش 10.2 - مقایسه اجزای پشته و جعبه
Section 10.2 - Comparing the Stack and Box Components
بخش 1.2 - اسکریپت ها و سازماندهی فایل
Section 1.2 - Scripts and File Organization
بخش 8.2 - سفارشی کردن پالت تم
Section 8.2 - Customizing Theme Palette
بخش 2.4 - رادیوهای MUI و دکمههای فرم
Section 2.4 - MUI Radios and Form Buttons
بخش 15.3 - نمایش و پنهان کردن اجزا بر اساس اندازه صفحه نمایش
Section 15.3 - Showing and Hiding Components Based on Screen Size
بخش 3.2 - شبکهها و کارتهای MUI
Section 3.2 - MUI Grids and Cards
بخش 1.5 - MUI AppBar and Drawer Styling
Section 1.5 - MUI AppBar and Drawer Styling
من ده سال تجربه توسعه نرم افزار حرفه ای در شرکت های آمریکایی، به علاوه دو سال وبلاگ نویسی JS و یوتیوب دارم. من دوست دارم کتابخانههای جاوا اسکریپت را عمیقاً کاوش کنم و در مورد سبکدهی کتابخانههای مؤلفهها تخصص عمیق کسب کنم.
من همچنین به تحصیل علاقه دارم و در بوت کمپ و در سطح کالج محلی برنامه نویسی را تدریس کرده ام. Skillshare یک پلت فرم عالی برای اشتراک گذاری اشتیاق و دانش نرم افزاری است.
نمایش نظرات