「MDUI」一个轻量级、无依赖的 Material Design 前端框架
zdhxiong · zdhxiong · 2016 年 12 月 29 日 · 30372 次点击这是一个创建于 3305 天前的主题，其中的信息可能已经有所发展或是发生改变。
Github ： https://github.com/zdhxiong/mdui
MDUI 是一个轻量级的 Material Design 前端框架，对照着 Material Design 文档进行开发，争取 1:1 实现 Material Design 中的组件。
多主题支持
MDUI 拥有 19 种主色、 16 种强调色、和一种夜间主题。只需添加一个 CSS 类即可实现主题的切换。
可以点击官方文档右上角按钮观看主题切换效果。
轻量级
包含所有主题的 CSS 文件仅 26.4KB minified + gzip
JavaScript 文件仅 12KB minified + gzip
且没有任何依赖
响应式
移动优先，可适配所有屏幕。
第 1 条附言 · 2017 年 4 月 28 日
0.2.0 版本已发布，主要更新为：
- 内置了一个 DOM 操作库，拥有和 jQuery 类似的语法，包含 CSS 选择器、DOM 操作、事件等功能。可以通过
mdui.JQ来调用该库。 - 修复在触控屏上，浮动操作按钮、滑块、Tab 选项卡、菜单等组件无法用鼠标操作的 bug。
 |
1
ss098 2016 年 12 月 29 日
很棒，看你 Demo 的时候被吓了一跳。
|
 |
2
lwjcjmx123 2016 年 12 月 29 日 via Android
先 mark 一下，回头给你个星星
|
 |
3
Famio 2016 年 12 月 29 日
感謝！已經試用。
|
 |
4
shellcodecow 2016 年 12 月 29 日
文档写的不错~~ 特别是右上角有个界面展现的案列
已 Star |
|
5
Famio 2016 年 12 月 29 日
已 star ，另外希望文檔能加入檢索功能，再次感謝
|
 |
6
luo123qiu 2016 年 12 月 29 日
很棒， star 支持。
|
 |
7
aaronly 2016 年 12 月 29 日 via iPhone
奈斯。回去给你 star
|
 |
8
learnshare 2016 年 12 月 29 日
细节不错
|
 |
9
lynth 2016 年 12 月 29 日
`star`
|
 |
10
ourstars 2016 年 12 月 29 日 via iPhone
看着好棒👍
|
 |
11
denghongcai 2016 年 12 月 29 日
棒极了
|
 |
12
ashfinal 2016 年 12 月 29 日
已 star
|
 |
13
scys 2016 年 12 月 29 日
很好，无依赖我喜欢这种库 :D
|
 |
14
tlv2013 2016 年 12 月 29 日
已 star
|
 |
15
chenyiping1995 2016 年 12 月 29 日 via Android
为什么感觉很像 materialize 框架……？
|
 |
16
Slyutae 2016 年 12 月 29 日
好棒，马上去 star
|
 |
17
owlsec 2016 年 12 月 29 日
star
|
 |
18
DoraJDJ 2016 年 12 月 29 日 via Android
不错，已 star
|
 |
19
ipeony 2016 年 12 月 29 日
赞 b(￣▽￣)d
|
 |
20
fy 2016 年 12 月 29 日
很棒 已 star
|
 |
21
kingcos 2016 年 12 月 29 日 via iPhone
好赞！ Star ！
（想借楼问个小问题…可能问题比较粗糙… 最近在写课程设计，但不想仅限于课设。 准备写一个前后端分离的网站吧，未来可能自己再开发手机端，后端准备用 Spring Boot ，只提供 RESTFUL API 接口，这个已经基本弄好了。那么前端要用什么框架比较好呢？… UI 框架在考虑 Bootstrap 4 或者就这个也很好，好像还要用 Ajax …总之谢谢啦…） |
 |
22
kingsleydon 2016 年 12 月 29 日 via Android
star 文档很棒
|
 |
23
flyingfz 2016 年 12 月 29 日
基于 Material Design 的前端框架， 在手机浏览器上的性能都很差。
---------------- 我测试过： 在微信里 查看 demo ，几乎是一帧一帧的显示出来， chrome 会好一些，但也能感受到卡。 Material Design 确实很喜欢， 但手机上性能这么差，没法用啊。 |
|
24
flyingfz 2016 年 12 月 29 日
先 star 下。
|
 |
25
Tuisku 2016 年 12 月 29 日
文档中：
涟漪颜色这里， WHITE 和 BLACK ，是不是弄反了？ |
 |
27
doubleflower 2016 年 12 月 29 日  1
意外发现质量不错。
不过做应用大家都是用 vue/react 之类的组件了，纯 css 组件不方便。 |
 |
28
jas0ndyq 2016 年 12 月 29 日 via iPhone
厉害
|
 |
29
phoenixlzx 2016 年 12 月 29 日
Star 已送，最近大概会拿来做个页面(๑•̀ω•́)✧
|
 |
30
greatghoul 2016 年 12 月 29 日
很赞很赞
|
 |
31
SorryChen 2016 年 12 月 29 日 via iPhone
赞！已 star
|
 |
32
Troevil 2016 年 12 月 29 日
不错,不知道会不会出 vue 版~
|
 |
33
renyijiu 2016 年 12 月 29 日
不错不错，赞一个
|
 |
35
anthozoan77 2016 年 12 月 29 日
厉害！
|
 |
36
fhefh 2016 年 12 月 29 日
|
 |
37
xiningxiao 2016 年 12 月 29 日 via iPhone
mark 一下
|
 |
38
yrom 2016 年 12 月 29 日
这个得赞一下
|
 |
40
run2 2016 年 12 月 29 日
http://www.mdui.org/docs/textfield 含图标 message 样式有点怪啊
|
 |
41
RobertYang 2016 年 12 月 29 日 via Android
棒
|
 |
42
wq2016 2016 年 12 月 29 日
666
|
 |
43
U2FsdGVkX1 2016 年 12 月 29 日
很棒的框架
已收藏 |
 |
44
zdhxiong OP @sobigfish 那是个多行文本框，图标会保持和文本框底部对齐， message 文本在文本框顶部，和上面的单行文本框看起来不一样，但应该没什么问题。
|
 |
45
hebeiround 2016 年 12 月 29 日 via iPhone
已收藏 很棒
|
 |
46
itfanr 2016 年 12 月 29 日 via Android
很棒
|
|
47
run2 2016 年 12 月 29 日
|
 |
49
mogita 2016 年 12 月 29 日
nice and clean
cool and dry |
 |
50
xcatliu 2016 年 12 月 29 日 via iPhone
看起来很不错，支持
|
|
51
xcatliu 2016 年 12 月 29 日 via iPhone
@doubleflower 借楼推荐一下更轻量级的 css 框架， http://getmobicss.com
|
|
52
xcatliu 2016 年 12 月 29 日 via iPhone
|
 |
53
metrue 2016 年 12 月 29 日
挺屌的。
|
|
54
xcatliu 2016 年 12 月 30 日 via iPhone 1
可以推荐到 chuangzaoshi.com @designer
|
 |
55
Yien 2016 年 12 月 30 日 via iPhone
感谢分享
|
 |
56
lufficc 2016 年 12 月 30 日 via Android
赞
|
 |
57
designer 2016 年 12 月 30 日 via iPhone
赞
|
 |
58
ClassicOldSong 2016 年 12 月 30 日 via Android
厉害了我的哥
已 star ，加油！ |
 |
59
gogobody 2016 年 12 月 30 日 via Android
mark
|
 |
60
blanu 2016 年 12 月 30 日
相当棒！连按下去减慢涟漪的效果都有做！用来撸小应用那还不是不要不要的，爽~
|
 |
61
xrlin 2016 年 12 月 30 日
star ，很不错啊，下次尝试使用下
|
 |
62
Cabana 2016 年 12 月 30 日 via Android
已 start ，等会在自己实验田试试…
|
 |
63
lzsadam 2016 年 12 月 30 日
很用心，非常棒，已经 star
|
 |
64
unique 2016 年 12 月 30 日
很棒的前端项目，已 star
|
 |
65
Hucai 2016 年 12 月 30 日
对于我这种菜鸟新手来说，太棒了，文档也很棒
|
 |
66
hronro 2016 年 12 月 30 日
赞一个！
|
 |
67
lwbjing 2016 年 12 月 30 日
建议前缀用 md mdui 要多打两个...
|
 |
68
shingoxray 2016 年 12 月 30 日
非常棒，很轻量，+*
|
 |
69
CrispElite 2016 年 12 月 30 日
厉害厉害 ，应该花了不少时间和精力 赞
|
 |
70
VtoEXL 2016 年 12 月 30 日
很好看
|
 |
71
LWXYFER 2016 年 12 月 30 日
不了解 gzip ， 但是从 CSS 体积从 240.52KB 到 26.4KB , 这么高压缩率啊。
|
 |
73
qping 2016 年 12 月 30 日
咨询个问题，像 a 标签之类的下划线颜色可以改吗
|
|
74
qping 2016 年 12 月 30 日
不用回我了，仔细看了下文档，<body class="mdui-theme-primary-indigo mdui-theme-accent-indigo">，就可以了 :)
|
 |
75
mink 2016 年 12 月 30 日
很漂亮以后就用这套了 。
|
 |
76
cst4you 2016 年 12 月 30 日
看成了 ADUI
|
 |
77
takeoffyoung 2016 年 12 月 30 日
已 star
|
 |
78
Email 2016 年 12 月 30 日
虽然不是前端工程师 但是要给个赞
|
 |
79
baozijun 2016 年 12 月 30 日
很是感谢，超级赞
|
 |
80
daiv 2016 年 12 月 30 日
还是感觉 layui 更适合一点，今天刚刚发现 layui
|
 |
81
greenskinmonster 2016 年 12 月 30 日
不得不说，确实挺厉害的。
|
 |
82
Geeker 2016 年 12 月 30 日
额，这和官方的感觉没什么区别啊，楼上的一群人难道都没看过官方的？ https://getmdl.io/
|
 |
83
wolfan 2016 年 12 月 30 日
看着确实比官方的 MDL 方便点，而且也丰富不少，反正是图省事偷懒的好帮手啊~
|
|
84
wolfan 2016 年 12 月 30 日
内啥，为什么俺这那个涟漪效果没有呐，试了好几遍了，没看到呐。
|
|
85
designer 2016 年 12 月 30 日
已收录在创造狮-开发者框架
|
 |
86
Pastsong 2016 年 12 月 30 日
是我见过的 Web 框架里对规范实现最好的一版了
|
 |
87
conglovely 2016 年 12 月 30 日
棒棒哒，已 Star
|
 |
89
zzutmebwd 2016 年 12 月 30 日
很棒 感谢
|
 |
90
rekulas 2016 年 12 月 30 日
cool 感觉比 bootstrap 更有价值
|
 |
91
exoticknight 2016 年 12 月 30 日
赞啊但是涟漪效果没有？控制台没报错，看起来是没有了 mdui-ripple-wave 类？
|
 |
92
tracymcladdy 2016 年 12 月 30 日
真的好棒！
|
 |
93
Nothentai 2016 年 12 月 30 日
真的好棒_(:з」∠)_
|
 |
94
forest520 2016 年 12 月 30 日
很喜欢，感谢！
|
 |
95
arzusyume 2016 年 12 月 30 日
不晓得为啥我直接访问和挂代理访问, demo 页又拍云的资源都加载不出来
|
 |
96
loveship 2016 年 12 月 30 日 via Android
看起来还不错，但是每个类都加个 mdui...stupid
|
|
97
zdhxiong OP @exoticknight 涟漪效果只要一个 mdui-ripple 类就行。你用什么版本的浏览器看不到涟漪效果？
|
|
98
zdhxiong OP @arzusyume 你可以看下这个页面： http://pubstatic.b0.upaiyun.com/cdn-health.html 。看是不是你的网络问题
|
|
99
zdhxiong OP @loveship 加前缀可以避免和其他库混用时产生冲突，现在有不少主流框架（比如： purecss 、 Material Design Lite 、 amazeui 、 uikit 等）都是这么做的，个人认为还是有必要的。
|
 |
100
iq72 2016 年 12 月 30 日
css ， js ，背景图加载不出来
 |
Select Language