相关的项目
以下精心挑选了一系列的库,他们都值得一阅。
因为 Material-UI 能够解决的问题范围有限,我们尽量会与其他库好好合作。 请随时提交一个 pull request 来加入另外一个项目,如果它合适的话我们会将其纳如列表。
设计资源
一套可重复使用的设计工具组件已经面世,这些工具是为了配合 React 组件而设计的,它们可以帮助你制作优秀的产品。
- Figma:大型 UI 套件,包含 600 多个手工制作的 Material-UI 组件。
- Sketch:大型 UI 套件,包含 600 多个手工制作的 Material-UI 符号。
- Adobe XD:大型 UI 套件,包含 600 多个手工制作的 Material-UI 符号。
- Framer:Material-UI 组件的小型 UI 套件
图像和图案
IDE 工具
- Material-UI Snippets:提供编写提示的 VSCode 扩展。
- Material-UI Codemorphs:提供代码模块的 VSCode 扩展。
- eslint: detect unused classes:ESLint 插件检测到
@material-ui/styles
中未使用的类。
Components 组件
这是一个扩展 Material-UI 的第三方项目的集合。
布局
- @mui-treasury/layout:处理一个页面整体布局的组件。 您可以找到几个相关的例子,例如: a reactjs.org clone。
通知
- notistack:轻松地显示消息条(snackbars)(所以您不必手动处理它们的打开/关闭状态)。
上传
- material-ui-dropzone:建立在 react-dropzone 的基础上的组件。
表单
- 使用 formik-material-ui 将 Material-UI 和 formik 结合使用。
- 使用 redux-form-material-ui 将 Material-UI 和 Redux Form 结合使用。
- 使用 mui-rff 将 Material-UI 和 React Final Form 结合使用。
- data-driven-forms MUI mapper Bindings 可以实现将 Material-UI 与 数据驱动表单(Data Driven Forms) 一起使用。
幻灯片
- material-auto-rotating-carousel:向新用户介绍您的应用程序。
图像
- material-ui-image:图片在完全加载之前都是很简陋的。 使用 material 图像来物化它! 它会像 material 图像的加载模式建议的一样淡入。
分页组件 Pagination
- material-ui-flat-pagination:一个基于 Material-UI 的扁平化设计的分页组件。
日程表/日历
- dx-react-scheduler-material-ui:一个基于 Material-UI 的日程表/日历组件,它具有多个功能,包括日历视图、编辑、重复一些预约和日期导航(需要 付费的许可证)。
图表
- dx-react-chart-material-ui:一个基于 Material-UI 的图表,它可以提供各种图表类型来可视化数据,包括条形图、线形图、面积图、散点图、饼图,以及更多(需要 付费许可证)。
Dialog
- material-ui-confirm:您无需编写模板代码,就可以轻松使用确认对话框功能来简化用户的确认操作。
颜色选择器
- material-ui-color:material-ui 的颜色组件集合。 无依赖包,安装体积小,可高度定制和主题支持!
Blocks(块级元素)
- components-extra:提供给了一系列基于 Material-UI 而搭建的”分子(molecule)”组件,譬如一个页脚(Footer),一个 CookiesBanner,一个 BackToTop 按钮,以及一些其他复杂的组件,它们都是高度可自定义的,来帮助开发人员来迅速搭建 UI 的宏观部分。 这些组件往往在网站上重复 —— 这个库解决了这个问题。
Theming 主题
- create-mui-theme:通过 Material Design Color Tool 创建 Material-UI 主题的在线工具。
- material-ui-theme-editor:只需要选择颜色即可为你的 Material-UI 应用生成主题的工具,同时还支持在线预览。
- Material palette generator:它可用于通过您输入的任何颜色生成一系列的调色板。