创意工作者的优质导航
MDUI
5K

前端开发者、设计师和团队在构建 Material Design 应用时，常选择 mdui——一款轻量级、TypeScript 开发的前端框架，提供丰富组件与插件，支持多主题切换、深色模式及响应式布局。

收费 开源免费
平台 Web
中文 官方文档支持中文
用途 快速构建遵循 Material Design 规范的现代 Web 应用

核心功能与组件

mdui 严格遵循 Material Design 规范，内置 30+ 组件和插件，覆盖常见 UI 需求。

  • 样式系统：颜色与主题、Roboto 字体、网格布局、排版、图标、媒体、辅助类、阴影。
  • 组件库：涟漪效果、按钮、浮动操作按钮、下拉选择、分隔线、折叠面板、文本框、选择控件、滑块、列表、列表控件、网格列表、选项卡、工具栏、应用栏、抽屉导航栏、底部导航栏、卡片、标签、工具提示、消息条、表格、对话框、菜单、进度条。
  • JavaScript 插件：Collapse（折叠面板控制）、Headroom（滚动时隐藏/显示导航栏）。
  • 资源集成：内置 Material 图标库，支持直接引用。

如何上手与安装

mdui 提供多种安装方式，零门槛快速启动。

  • CDN 引入：推荐方式，在 <head> 添加 CSS 链接（https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css），在 </body> 前添加 JS 链接（https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js），无需第三方依赖。
  • 包管理器：支持 npm（npm install mdui --save）和 yarn（yarn add mdui）。
  • 预编译文件：直接下载包含 CSS、JS、Roboto 字体和 Material Icons 的压缩包。
  • 源码编译：GitHub 开源，可克隆仓库自行编译或贡献代码。

浏览器兼容性

mdui 1.0.2 兼容主流浏览器及旧版 IE，确保跨平台稳定运行。

  • Chrome：支持最新两个版本。
  • Firefox、Safari、Opera、Edge：支持最新版本。
  • IE：支持 11 及以上版本。
  • Android Browser：支持 4.4 及以上版本。

版本与升级

mdui 提供 1.x 和 2.x 两个主要版本，满足不同开发需求。

  • mdui 1：当前文档版本为 1.0.2，提供从 0.4.3 升级到 1.0.0 的迁移指南。
  • mdui 2：基于 Material Design 3 和 Web Components 的全新版本，已发布独立开发文档。
  • 历史版本：可点击官网链接下载旧版文件。

常见问题

Q1：mdui 是否依赖 jQuery 或其他第三方库？

A1：不依赖。mdui 使用原生 TypeScript 开发，仅需引入其 CSS 和 JS 文件即可正常使用所有组件和插件。

Q2：mdui 1 和 mdui 2 有什么区别？如何选择？

A2：mdui 1 基于传统 CSS/JS，兼容 IE11+，适合需要广泛浏览器支持的项目；mdui 2 基于 Material Design 3 和 Web Components，面向现代浏览器，提供更新的设计语言和组件化方案。官网同时维护两套独立文档。

Q3：mdui 是否支持深色模式？如何切换？

A3：支持。mdui 内置深色模式切换功能，可通过 JavaScript 全局方法或添加 CSS 类实现，具体用法见文档“颜色与主题”章节。

更多同类工具与网站,可在其他框架分类继续挑选。

信息核实于 2026年7月,具体以官网为准。

评论

暂无评论

发表评论

  • 您的邮箱地址不会被公开。
评论