react admin dashboard material ui

2022年11月17日

React Admin儀表板|實時鏈接

使用的技術

1. 反應
2. 材料UI
3. formik
4. 是的
5. Nivo圖表
6. 全卡倫達
7. React-Pro-Sidebar

此應用程序包括

• 淺色模式
• 儀表板摘要
• 3個不同的數據表頁面
• 用戶輸入表單頁面
• 日曆集成
• 常見問題頁面
• 4個不同的圖表

學習環境

• ...傳播操作員 +條件基本對象屬性在主題級別上加載
• 使用CSS工具==>農藥
• 通過對象的數組{text，圖標}，構造side-menu
• 行列材料-UI佈局數據顯示...
• material ui的data-grid佈局的使用...
• 刷新後，路徑名成為選定的菜單項...
• 用戶輸入表單驗證yup檢查...
• 輸入字符串的電話號碼等級圖案...
• 使用[email protected]及其css ...
• 使用full-calendar圖書館...
• 使用nivo chart系統...
• 從Vite遷移經驗到反應，
  • 因為VITE有一些全卡倫達式的Issus ...

紗線基本軟件包/lib ...

不	軟件包名稱	描述
01	紗線添加了react-router-dom	URL導航
02	紗線添加[email protected]	React Pro側邊欄
03	紗線添加formik	形式元素
04	紗線添加yup	表單驗證
05	紗線添加@mui/material	材料UI
06	紗線添加@emotion/react	材料UI
07	紗線添加@emotion/styled	材料UI
08	紗線添加@emotion/styled	材料UI
09	紗線添加@mui/x-data-grid	材料UI
10	紗線添加@mui/icons-material	材料UI
11	紗線添加@fullcalendar/core	完整日曆？
12	紗線添加@fullcalendar/daygrid	完整日曆？
13	紗線添加@fullcalendar/timegrid	完整日曆？
14	紗線添加@fullcalendar/list	完整日曆？
15	紗線添加@fullcalendar/interaction	完整日曆？
16	紗線添加@fullcalendar/react	完整日曆？
17	紗線添加@nivo/core	Nivo圖表？
18	紗線添加@nivo/pie	Nivo圖表？
19	紗線添加@nivo/bar	Nivo圖表？
20	紗線添加@nivo/line	Nivo圖表？
21	紗線添加@nivo/geo	Nivo圖表？

文件和文件夾層次結構

 ?
src
├── components
|   ├── BarChart.jsx
|   ├── GeographyChart.jsx
|   ├── Header.jsx
|   ├── index.js
|   ├── LineChart.jsx
|   ├── PieChart.jsx
|   ├── ProgressCircle.jsx
|   └── StatBox.jsx
|
├── constants
|   ├── contactsColumns.js
|   ├── faq.js
|   ├── inputFormFields.js
|   ├── inputFormValues.js
|   ├── invoicesColumns.js
|   ├── mockData.js
|   ├── mockGeoFeatures.js
|   ├── sidebarMenu.js
|   └── teamColumns.js
|
├── pages
|   |   Dashboard.jsx
|   |   index.js
|   |
|   ├── charts
|   |   ├── Bar.jsx
|   |   ├── Geography.jsx
|   |   ├── Line.jsx
|   |   └── Pie.jsx
|   |
|   ├── global
|   |   ├── SidebarMenu.jsx
|   |   ├── SidebarMenuItem.jsx
|   |   └── Topbar.jsx
|   |
|   ├── info
|   |   ├── Contacts.jsx
|   |   ├── Invoices.jsx
|   |   └── Team.jsx
|   |
|   └── inputs
|       ├── Calendars.jsx
|       ├── FAQ.jsx
|       └── InputForm.jsx
|
├── styles
|   ├── index.css
|   └── theme.js
|
├── App.jsx
└── index.js
?

 tree /f