آموزش طراحی اجزای رابط کاربری پیشرفته مواد: دوره کامل - آخرین آپدیت

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

  • بخش 5.2 - استایل تکمیل خودکار پیشرفته Section 5.2 - Advanced Autocomplete Styling

  • مقدمه ای بر سبک کامپوننت پیشرفته MUI (v5). Intro to Advanced MUI (v5) Component Styling

  • بخش 14.1 - استفاده از Data Grid renderCell Prop Section 14.1 - Using the Data Grid renderCell Prop

  • بخش 8.1 - ایجاد یک تم Material-UI Section 8.1 - Creating a Material-UI Theme

  • بخش 14.3 - طراحی شبکه داده پیشرفته Section 14.3 - Advanced Data Grid Styling

  • بخش 2.3 - MUI TextField، تکمیل خودکار، انتخاب و DatePicker Section 2.3 - MUI TextField, Autocomplete, Select, and DatePicker

  • بخش 2.8 - صادرات اجزای سفارشی Section 2.8 - Exporting Custom Components

  • بخش 4.2 - SX vs Styled API vs Theme Section 4.2 - SX vs Styled API vs Theme

  • بخش 15.4 - انتقال CSS در MUI Section 15.4 - CSS Transitions in MUI

  • بخش 9.1 - اجزای فرم پیشرفته Section 9.1 - Advanced Form Components

  • بخش 8.3 - ایجاد لغو و انواع تم Section 8.3 - Creating Theme Overrides and Variants

  • بخش 12.1 - کنترل ارتفاع کارت در داخل شبکه Section 12.1 - Controlling Card Height Inside the Grid

  • بخش 11.1 - استفاده از مؤلفه جمع کردن MUI Section 11.1 - Using the MUI Collapse Component

  • بخش 4.1 - APIهای سبک MUI و فلسفه Section 4.1 - MUI Styling APIs and Philosophy

  • بخش 15.2 - قلاب های پاسخگوی موبایل و مقادیر حالت Section 15.2 - Mobile Responsive Hooks and State Values

  • بخش 3.1 - مقدمه ای بر شبکه ها، جداول و شبکه های داده MUI Section 3.1 - Intro to MUI Grids, Tables, and DataGrids

  • بخش 1.4 - MUI + روتر React Section 1.4 - MUI + React Router

  • بخش 7.2 - تم، لوازم جانبی و گزینه‌ها در Styled API Section 7.2 - Theme, Props, and Options in the Styled API

نمایش نظرات

آموزش طراحی اجزای رابط کاربری پیشرفته مواد: دوره کامل
جزییات دوره
6h 40m
49
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
3
از 5
ندارد
دارد
دارد
Jon Middaugh
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Jon Middaugh Jon Middaugh

ایجاد کننده محتوای توسعه دهنده وب

من ده سال تجربه توسعه نرم افزار حرفه ای در شرکت های آمریکایی، به علاوه دو سال وبلاگ نویسی JS و یوتیوب دارم. من دوست دارم کتابخانه‌های جاوا اسکریپت را عمیقاً کاوش کنم و در مورد سبک‌دهی کتابخانه‌های مؤلفه‌ها تخصص عمیق کسب کنم.

من همچنین به تحصیل علاقه دارم و در بوت کمپ و در سطح کالج محلی برنامه نویسی را تدریس کرده ام. Skillshare یک پلت فرم عالی برای اشتراک گذاری اشتیاق و دانش نرم افزاری است.