V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
zdhxiong

「MDUI」一个轻量级、无依赖的 Material Design 前端框架

  zdhxiong ·
zdhxiong · Dec 29, 2016 · 30727 views
This topic created in 3411 days ago, the information mentioned may be changed or developed.

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

文档: http://www.mdui.org/docs/

MDUI 是一个轻量级的 Material Design 前端框架,对照着 Material Design 文档进行开发,争取 1:1 实现 Material Design 中的组件。

多主题支持

MDUI 拥有 19 种主色、 16 种强调色、和一种夜间主题。只需添加一个 CSS 类即可实现主题的切换。

可以点击官方文档右上角按钮观看主题切换效果。

轻量级

包含所有主题的 CSS 文件仅 26.4KB minified + gzip

JavaScript 文件仅 12KB minified + gzip

且没有任何依赖

响应式

移动优先,可适配所有屏幕。

Supplement 1  ·  Apr 28, 2017

0.2.0 版本已发布,主要更新为:

  • 内置了一个 DOM 操作库,拥有和 jQuery 类似的语法,包含 CSS 选择器、DOM 操作、事件等功能。可以通过 mdui.JQ 来调用该库。
  • 修复在触控屏上,浮动操作按钮、滑块、Tab 选项卡、菜单等组件无法用鼠标操作的 bug。
148 replies    2020-01-19 16:16:04 +08:00
1  2  
zdhxiong
    101
zdhxiong  
OP
   Dec 30, 2016
@iq72 现在应该好了
iq72
    102
iq72  
   Dec 30, 2016
@zdhxiong 还是不行,但是,查了下 ERR_SPDY_PROTOCOL_ERROR 好想事 chrome 的锅
makry
    103
makry  
   Dec 30, 2016
star 支持
sox
    104
sox  
   Dec 30, 2016
楼主果然一丝不苟没有作假

LWXYFER
    105
LWXYFER  
   Dec 30, 2016
@zdhxiong get.
wolfan
    106
wolfan  
   Dec 30, 2016
@zdhxiong win10-Chrome 版本 55.0.2883.87 m (64-bit),控制台没有啥报错,反正呐,就是没有涟漪效果。
wolfan
    107
wolfan  
   Dec 30, 2016
@zdhxiong 不过用模拟器打开涟漪效果就反道出来了,话说……,这是什么神奇的效果呐~
viosey
    108
viosey  
   Dec 31, 2016
CSS 丢了 +1
zdhxiong
    109
zdhxiong  
OP
   Dec 31, 2016
@viosey 并没有啊。
viosey
    110
viosey  
   Dec 31, 2016
zdhxiong
    111
zdhxiong  
OP
   Dec 31, 2016
@viosey 奇怪了,我静态资源用的都是 http ,怎么到你这里就变成 https 了
viosey
    112
viosey  
   Dec 31, 2016
@zdhxiong 懂了,我用的强制 HTTPS 插件。估计是因为 upyun 支持 HTTPS ,所以资源强制走 HTTPS ,然后你只有 http...
话说为什么不都走 HTTPS 呢?感觉不是很友好啊
zdhxiong
    113
zdhxiong  
OP
   Dec 31, 2016
@viosey 现在应该好了
viosey
    114
viosey  
   Dec 31, 2016   ❤️ 1
@zdhxiong Nice! 框架很棒。 我的 Hexo Material Design 主题 https://github.com/viosey/hexo-theme-material 有打算使用这个框架来重构
kimwang
    115
kimwang  
   Dec 31, 2016
感谢楼主,正需要一个漂亮,轻量的前端框架,先欣赏、学习一下。
ishowman
    116
ishowman  
   Dec 31, 2016
IE10 以下不支持吗?看来比较适合用在移动端
zdhxiong
    117
zdhxiong  
OP
   Dec 31, 2016
@ishowman 只支持 IE10 以上。
jeanim
    118
jeanim  
   Mar 5, 2017
很棒,感谢楼主
xingso
    119
xingso  
   Apr 28, 2017
这个厉害了。。支持下楼主
maomaomao001
    120
maomaomao001  
   Apr 28, 2017 via Android
建议去掉响应式,毕竟有单独的响应式框架
zdhxiong
    121
zdhxiong  
OP
   Apr 28, 2017
@maomaomao001 MDUI 就是你说的 “单独的响应式框架”
manihome
    122
manihome  
   Apr 28, 2017
这个好 已 star⭐️
mogita
    123
mogita  
   Apr 28, 2017
之前用 MDUI 撸了个半成品 web app ( Vue.js + MDUI ),手机观看效果最佳。。
https://whatair.mogita.cn/
框架使用体验很不错,功能顺手。只是每个 class 名都要加 mdui- 前缀略繁琐,而且会让 html 标签变得非常长。。
maomaomao001
    124
maomaomao001  
   Apr 28, 2017 via Android
@zdhxiong 不是吧,你这不是还带各种组件嘛,市面上有单独的布局的 css 框架了,很全面的
pynix
    125
pynix  
   Apr 28, 2017
貌似不错。。
zdhxiong
    126
zdhxiong  
OP
   Apr 28, 2017
@maomaomao001 MDUI 支持自定义打包,你不想要组件,可以把组件全部去掉;不想要响应式布局,可以把响应式布局模块去掉。
springmarker
    127
springmarker  
   Apr 28, 2017 via Android
http://www.tikitiki.cn 用的 0.1.2 撸的一个
ab
    128
ab  
   Apr 28, 2017 via iPhone
好厉害啊
plzzzzg
    129
plzzzzg  
   Apr 28, 2017 via Android
收藏 回头 star
only0jac
    130
only0jac  
   Apr 28, 2017 via Android
提个建议,headroom 在手机端一点也不流畅,刚开始以为自己手机不行,后来换了个单独的 headroom 插件,极度流畅
nicevar
    131
nicevar  
   Apr 28, 2017
不错,正在寻找一个轻量级的做新的东西,以前用过 jQueryMobile 和 sencha touch,感觉不太行,这两天看了一下 vue,还是有点啰嗦了,试试楼主的大作
TriiHsia
    132
TriiHsia  
   Apr 28, 2017
好赞!收藏了,打算作为下一个项目的前端。
KiseXu
    133
KiseXu  
   Apr 29, 2017 via iPhone
很不错,楼主辛苦了
KiseXu
    134
KiseXu  
   Apr 29, 2017   ❤️ 2
楼主,有没有捐赠方式,想给项目捐赠
zdhxiong
    135
zdhxiong  
OP
   Apr 29, 2017 via Android
@KiseXu http://www.mdui.org/design/
这儿有捐赠二维码
zdhxiong
    136
zdhxiong  
OP
   Apr 29, 2017
@KiseXu 捐赠已到账,非常感谢
KiseXu
    137
KiseXu  
   Apr 29, 2017
@zdhxiong 😊 加油 💪
visonnn
    138
visonnn  
   May 4, 2017 via Android
Wow,很赞。
omygod
    139
omygod  
   Jun 2, 2017
nice
osacar
    140
osacar  
   Jun 19, 2017
@ck65 在 vue cli 中你是如何引入 MDUI 的?请教一下方法,多次尝试都没有成功。
mogita
    141
mogita  
   Jun 19, 2017 via iPhone
@osacar bower 安装后直接在 index.html 引入 css 和 js。这个项目比较挫,当时还不会模块化引入。。
osacar
    142
osacar  
   Jun 19, 2017
@ck65 使用 webpack 能行么?你说的模块化引入又是如何操作?请指教。
mogita
    143
mogita  
   Jun 19, 2017 via iPhone
@osacar 抱歉没有尝试过,有个 issue 里作者建议 cdn 引入,也就是直接引文件。https://github.com/zdhxiong/mdui/issues/70
enious
    144
enious  
   Nov 13, 2017
@zdhxiong 楼主怎么个自定义打包法,你的文档完全没有说明
zdhxiong
    145
zdhxiong  
OP
   Nov 13, 2017
@enious 用 gulp custom 命令,命令的参数在这里有介绍: https://www.mdui.org/docs/download#build
nVoxel
    146
nVoxel  
   May 11, 2018
作者能简单说下类似 [组件的在线说明文档怎么制作的?]( https://www.v2ex.com/t/454106#reply1) 问题里的问题么?

这种文档一般是怎么生成的?
yhxx
    147
yhxx  
   Jun 26, 2018
官网好像挂了?
wfdaj
    148
wfdaj  
   Jan 19, 2020
@zdhxiong 请问如何使用 gulp 自定义 mdui ?
按照网站提示,命令行是这样吗? gulp --custom -primary-colors:teal ?
错误提示是:ReferenceError: primordials is not defined
1  2  
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2343 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 110ms · UTC 01:39 · PVG 09:39 · LAX 18:39 · JFK 21:39
♥ Do have faith in what you're doing.