MENU

前端框架 之 MDUI

Material Design User Interface

MDUI 是一个基于 Material Design 的前端框架。漂亮、轻量且好用,它能让你更轻松地开发 Material Design 网页应用。

MDUI 官网 文档 社区

  • 多主题:19 种主色、16 种强调色、1 种夜间主题,只需添加一个 CSS 类即可切换。且支持根据操作系统主题自动切换主题。
  • 轻量级:CSS 仅 32KB,JavaScript 仅 19KB,加载更迅速。
  • TypeScript:全部使用 TypeScript 开发,拥有完美的类型提示。
  • 响应式:移动优先,从小屏逐步扩展到大屏,最终实现所有屏幕适配。
  • 无依赖:不依赖任何第三方库,节约网络流量,使加载更迅速,提高用户体验。
  • 高性能:使用 CSS3 来做动画交互,平滑、高效,让 Web 应用的动画更流畅。
  • 组件丰富:MDUI 包含了 20 余个组件,且每个组件都可以适应不同主题。
  • 低学习成本:只需懂一点 HTML、CSS、JS 的基础知识,就能使用 MDUI。

Start

<!-- MDUI CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
  integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
  crossorigin="anonymous"
/>

<!-- MDUI JavaScript -->
<script
  src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
  integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
  crossorigin="anonymous"
></script>

Program

MDUI Club 轻量社区系统

MDClub 是一个漂亮、轻量的开源社区系统。它运行快速且易于使用,完全具备一个成熟社区所需的功能。它的特性包括:MD 风格、响应式、超轻量、明暗主题、单页面且完美支持 SEO、定制富文本编辑器、安装方便、强大 Restful API 支持、OpenAPI 文档规范、多平台 JavaScript SDK ......

MDClub 教程 Github

MDx WordPress 博客主题

MDx

MDx:轻于形,悦于心。她是一款轻快、优雅且强大的 Material Design 风格 WordPress 主题。

MDx 文档 Github

MDr Typecho 博客主题

MDr

MDr,一款 Material Design 风格 Typecho 主题,书写你的篇章。

MDr 文档 Github

Jekyll-Theme-MDUI

Jekyll-Theme-MDUI

Jekyll Theme MDUI 是一个 基于 MDUi 的 Jekyll 主题,没有依赖任何 GitHub Pages 不支持的插件,可以将其完美的托管在 Github Pages。

Jekyll-Theme-MDUI 文档 Github

materiality-typecho-theme

materiality-typecho-theme

materiality-typecho-theme:一款简洁并专注于显示文字内容的 Material Design 风格 Typecho 主题,基于 MDUI

materiality-typecho-theme Github

HEXO-THEME-MDUI

HEXO-THEME-MDUI:一个炫酷的 Material Design 的 HEXO 主题

Github Demo 文档

Learn

MDUI 由国人大佬 @zdhxiong 独立开发维护。上手特别容易,且不太适用于大型显目,故教程较少。您可以阅读官方全中文文档或研究精选实例学习。


加入 QQ群 与小伙伴一起玩耍!

最后编辑于: 2022 年 03 月 08 日
返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码