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