MDUI 前端框架

教程说明:


MDUI 是一套用于开发 Material Design 网页的前端框架


快速入口

Github:https://github.com/zdhxiong/mdui

官网:https://www.mdui.org/

官网文档:https://www.mdui.org/docs/

设计规范:https://www.mdui.org/design/


获取 MDUI

从官网下载

https://www.mdui.org

CDN

cdnjs: https://cdnjs.com/libraries/mdui

bootcdn: http://www.bootcdn.cn/mdui/

npm

npm install mdui

Bower

bower install mdui


特性

  • 多主题:19 种主色、16 种强调色、1 种夜间主题,只需添加一个 CSS 类即可切换。
  • 轻量级:CSS 仅 26.7KB,JavaScript 仅 14KB,加载更迅速。
  • 响应式:移动优先,从小屏逐步扩展到大屏,最终实现所有屏幕适配。
  • 无依赖:不依赖任何第三方库,节约网络流量,使加载更迅速,提高用户体验。
  • 高性能:使用 CSS3 来做动画交互,平滑、高效,让 Web 应用的动画更流畅。
  • 模块化:提供自定义打包功能,按需打包需要的主题和组件,使文件体积骤然减小。
  • 本地化:相比国外框架,MDUI 更注重中文排版,提供全中文文档,中文社区。
  • 组件丰富:MDUI 包含了 20 余个组件,且每个组件都可以适应不同主题。
  • 低学习成本:只需懂一点 HTML、CSS、JS 的基础知识,就能使用 MDUI。


兼容性

MDUI 在下列浏览器中经过测试

  • IE 10+
  • 最新版的 Firefox、Chrome、Safari、Edge


License

This content is released under the MIT License.


温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }