MUI components

MUI 元件

使用 React Material UI 設計 UI 元素樣式的指南

反應模板

每個佈局的各個部分都透過註解或使用單獨的檔案來明確定義，從而可以輕鬆提取頁面的某些部分（例如「英雄單元」或頁腳）以便在其他頁面中重複使用。對於多部分範例，連結原始碼位置的自述文件中的表格描述了每個文件的用途。

預設斷點

每個斷點（一個鍵）與一個固定的螢幕寬度（一個值）相符：

• xs ，超小號：0px
• sm ，小：600px
• MD ，中：900px
• LG ，大：1200px
• xl ，超大：1536px

---

 cd /d G: O thers r eact v ite-project
 npm run dev
 http://localhost:5173/

---

展示櫃

使用 Material UI 查看這些公開應用程序，以獲得下一個專案的靈感。

主題化

以下實用程式可以幫助您自訂主題並能夠在瀏覽器中更改主題。

• 建立 Material-UI 主題 - 透過 Material Design Color Tool 建立 MUI 主題的線上工具。
• Material-UI Theme Generator - Material-UI 主題/調色盤產生器。
• Material-UI 主題編輯器 - 只需選擇顏色並進行即時預覽即可為 MUI 應用程式產生主題的工具。

相關項目

Material-UI 設計系列項目。

• material-ui-theme-editor - 為 Material UI 應用程式產生主題的工具，具有即時預覽功能。
• Material 調色盤產生器 - 官方 Material Design 調色盤產生器可用於為您選擇的任何顏色產生調色盤。
• 額外元件 - 提供一組建構在 Material-UI 之上的「分子」元件，例如頁尾、CookiesBanner、BackToTop 按鈕和其他高度可自訂的複雜元素，以幫助開發人員快速建立 UI 的巨集部分。這些元件通常在各個站點之間重複 - 這個庫解決了這個確切的問題。
• React Admin - 一個前端框架，用於使用 ES6、React 和 Material Design 在 REST/GraphQL API 之上建立在瀏覽器中運行的管理應用程式。
• Material UI Snippets - 提供片段的 VSCode 擴充。
• Material UI Codemorphs - 提供 codemod 的 VSCode 擴充。
• Eslint：檢測未使用的類別 - ESLint 外掛程式用於使用@mui/styles檢測未使用的樣式類別。

成分

使用 Material-UI Design 建立的 UI 元件清單。

• Material-UI 密碼欄位 - 使用 Material-UI 的密碼欄位。
• 全螢幕對話框 - Material-UI 的全螢幕對話框.
• Material-UI Upload - 使用 FileAPI 上傳在 Material-UI 中製作的控制項。
• Super Select Field - Material-UI 的多重選擇自動完成下拉元件。
• Material JSON Schema Form - 從 json 產生的 Material-UI 表單。
• Notistack -Material-UI 的簡單小吃列（因此您不必處理它們的開啟/關閉狀態）。
• Material-UI Dropzone - 基於 React-dropzone 建構的 Material-UI 元件.
• Formik-Material-UI - 將 Material-UI 與 formik 結合使用的綁定.
• Redux-Form-Material-UI - 包裝組件，以方便將 Material-UI 與 Redux Form 一起使用。
• Final-Form-Material-UI - 包裝組件，以便將 Material-UI 與 Final Form 一起使用。
• Material-UI Auto Rotating Carousel - Material 風格的輪播。
• Material-UI Image - 帶有載入動畫的 Material 風格圖像。
• Material-UI Flat Pagination - Material-UI 的平面設計分頁元件。
• Dx-react-scheduler-Material-UI -Material-UI 的排程器/行事曆元件。
• dx-react-chart-Material-UI - Material-UI 的圖表，使用各種系列類型（包括長條圖、折線圖、面積圖、散佈圖、圓餅圖等）來視覺化資料。
• Material-UI Medium Blog - 擴展 Material-UI Card 元件以顯示 Medium 部落格.
• React Github Repo Cards - 擴展 Material-UI Card 元件以顯示 GitHub 儲存庫。
• React molecular-components - 基於 Material-UI 的 React 分子組件.
• Material-UI NestedMenuItem - 使用無限嵌套選單直接取代 MUI 的 MenuItem，並在懸停時打開。
• React-planet - 創建看起來像行星的圓形選單。