آموزش یک ظاهر طراحی پیشرفته Material-UI Component: دوره کامل

سرفصل ها و درس ها

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

• معرفی Introduction

معماری یک اپلیکیشن Material-UI Architecting a Material-UI App

• آنچه ما خواهیم ساخت What We Will Build

• اسکریپت ها و سازماندهی فایل ها Scripts and File Organization

• MUI AppBar و عملکرد کشو MUI AppBar and Drawer Functionality

• MUI + روتر React MUI + React Router

• MUI AppBar و استایل کشو MUI AppBar and Drawer Styling

فرو رفتن عمیق در فرم های MUI Deep Dive into MUI Forms

• آنچه ما خواهیم ساخت What We Will Build

• داده ها و انواع Data and Types

• MUI TextField، Autocomplete، Select و DatePicker MUI TextField, Autocomplete, Select, and DatePicker

• رادیوهای MUI و دکمه‌های فرم MUI Radios and Form Buttons

• فاصله ی اجزا در فرم ها Component Spacing in Forms

• فرم رویداد Handlers Form Event Handlers

• فرم ارسال و هشدار Form Submit and Alert

• صادرات اجزای سفارشی Exporting Custom Components

شبکه‌ها، جداول و شبکه‌های داده MUI MUI Grids, Tables, and Data Grids

• آنچه را که خواهیم ساخت What we will build

• شبکه ها و کارت های MUI MUI Grids and Cards

• جداول Tables

• شبکه های داده MUI MUI Data Grids

• گره زدن همه با هم Tying It All Together

نمای کلی استایل MUI پیشرفته Advanced MUI Styling Overview

• MUI Styling APIs and Philosophy MUI Styling APIs and Philosophy

• SX vs Styled API vs Theme SX vs Styled API vs Theme

• درک JSX، DOM، و اجزای ترکیبی Understanding JSX, the DOM, and Compositional Components

استایل و استفاده پیشرفته MUI TextField، تکمیل خودکار، انتخاب و DatePicker Advanced MUI TextField, Autocomplete, Select, and DatePicker Styling and Use

• یک ظاهر طراحی پیشرفته TextField Advanced TextField Styling

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

• انتخاب سبک کامپوننت پیشرفته Advanced Select Component Styling

• لوازم و استایل پیشرفته DatePicker Advanced DatePicker Props and Styling

Syntax پیشرفته SX Prop Advanced SX Prop Syntax

• هر SX Prop Syntax توضیح داده شده است EVERY SX Prop Syntax Explained

• یک مؤلفه برگه‌ها با استایل سفارشی ایجاد کنید Create a Custom Styled Tabs Component

نحو API با سبک پیشرفته Advanced Styled API Syntax

• نحوه ایجاد کامپوننت های سبک How to Create Styled Components

• Theme، Props و Options در Styled API Theme, Props, and Options in the Styled API

یک ظاهر طراحی پیشرفته تم Advanced Theme Styling

• ایجاد یک تم Material-UI Creating a Material-UI Theme

• سفارشی کردن پالت تم Customizing Theme Palette

• ایجاد لغو و انواع تم Creating Theme Overrides and Variants

• سفارشی کردن نقاط شکست تم Customizing Theme Breakpoints

استفاده از فرم و استایل پیشرفته MUI Advanced MUI Form Use and Styling

• اجزای فرم پیشرفته Advanced Form Components

طرح‌بندی‌های پیشرفته با پشته و جعبه MUI Advanced Layouts with MUI Stack and Box

• طرح بندی عمودی و افقی با مولفه پشته Vertical and Horizontal Layouts with the Stack Component

• مقایسه اجزای پشته و جعبه Comparing the Stack and Box Components

اجزای جمع شونده در MUI Collapsible Components in MUI

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

اندازه، استایل، فاصله و تراز شبکه MUI پیشرفته Advanced MUI Grid Sizing, Styling, Spacing, and Alignment

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

• اندازه شبکه، سبک و تراز Grid Size, Style, and Alignment

• فاصله شبکه Grid Spacing

استفاده از جدول MUI و یک ظاهر طراحی شده پیشرفته Advanced MUI Table Use and Styling

• سفارشی کردن کامپوننت جدول Customizing the Table Component

استفاده از شبکه داده پیشرفته و یک ظاهر طراحی شده Advanced Data Grid Use and Styling

• با استفاده از Data Grid renderCell Prop Using the Data Grid renderCell Prop

• سلول های مؤلفه در شبکه داده MUI Component Cells in the MUI Data Grid

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

• مرتب سازی شبکه داده ها و فیلتر کردن Data Grid Sort and Filter

افزودن پاسخگوی موبایل به برنامه MUI Adding Mobile Responsive to the MUI App

• اضافه کردن نقاط شکست به کامپوننت ها Adding Breakpoints to Components

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

• نمایش و پنهان کردن اجزا بر اساس اندازه صفحه نمایش Showing and Hiding Components Based on Screen Size

• انتقال CSS در MUI CSS Transitions in MUI