爱意满满的作品展示区。
zdhxiong

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

  zdhxiong ·
zdhxiong · Dec 29, 2016 · 32081 views
This topic created in 3596 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  
❮ ❯
ss098
ss098
Dec 29, 2016
1
很棒,看你 Demo 的时候被吓了一跳。
lwjcjmx123
lwjcjmx123
Dec 29, 2016 via Android
2
先 mark 一下,回头给你个星星
Famio
Famio
Dec 29, 2016
3
感謝!已經試用。
shellcodecow
shellcodecow
Dec 29, 2016
4
文档写的不错~~ 特别是右上角有个界面展现的案列
已 Star
Famio
Famio
Dec 29, 2016
5
已 star ,另外希望文檔能加入檢索功能,再次感謝
luo123qiu
luo123qiu
Dec 29, 2016
6
很棒, star 支持。
aaronly
aaronly
Dec 29, 2016 via iPhone
7
奈斯。回去给你 star
learnshare
learnshare
Dec 29, 2016
8
细节不错
lynth
lynth
Dec 29, 2016
9
`star`
ourstars
ourstars
Dec 29, 2016 via iPhone
10
看着好棒👍
denghongcai
denghongcai
Dec 29, 2016
11
棒极了
ashfinal
ashfinal
Dec 29, 2016
12
已 star
scys
scys
Dec 29, 2016
13
很好,无依赖我喜欢这种库 :D
tlv2013
tlv2013
Dec 29, 2016
14
已 star
chenyiping1995
chenyiping1995
Dec 29, 2016 via Android
15
为什么感觉很像 materialize 框架……?
Slyutae
Slyutae
Dec 29, 2016
16
好棒,马上去 star
owlsec
owlsec
Dec 29, 2016
17
star
DoraJDJ
DoraJDJ
Dec 29, 2016 via Android
18
不错,已 star
ipeony
ipeony
Dec 29, 2016
19
赞 b( ̄▽ ̄)d
fy
fy
Dec 29, 2016
20
很棒 已 star
kingcos
kingcos
Dec 29, 2016 via iPhone
21
好赞! Star !
(想借楼问个小问题…可能问题比较粗糙…
最近在写课程设计,但不想仅限于课设。
准备写一个前后端分离的网站吧,未来可能自己再开发手机端,后端准备用 Spring Boot ,只提供 RESTFUL API 接口,这个已经基本弄好了。那么前端要用什么框架比较好呢?… UI 框架在考虑 Bootstrap 4 或者就这个也很好,好像还要用 Ajax …总之谢谢啦…)
kingsleydon
kingsleydon
Dec 29, 2016 via Android
22
star 文档很棒
flyingfz
flyingfz
Dec 29, 2016
23
基于 Material Design 的前端框架, 在手机浏览器上的性能都很差。
----------------
我测试过: 在微信里 查看 demo ,几乎是一帧一帧的显示出来, chrome 会好一些,但也能感受到卡。
Material Design 确实很喜欢, 但手机上性能这么差,没法用啊。
flyingfz
flyingfz
Dec 29, 2016
24
先 star 下。
Tuisku
Tuisku
Dec 29, 2016
25
文档中:
涟漪颜色这里, WHITE 和 BLACK ,是不是弄反了?
zdhxiong
zdhxiong
OP
Dec 29, 2016❤️1
26
@Tuisku 文档写错了,已经改过来了
doubleflower
doubleflower
Dec 29, 2016❤️1
27
意外发现质量不错。


不过做应用大家都是用 vue/react 之类的组件了,纯 css 组件不方便。
jas0ndyq
jas0ndyq
Dec 29, 2016 via iPhone
28
厉害
phoenixlzx
phoenixlzx
Dec 29, 2016
29
Star 已送,最近大概会拿来做个页面(๑•̀ω•́)✧
greatghoul
greatghoul
Dec 29, 2016
30
很赞很赞
SorryChen
SorryChen
Dec 29, 2016 via iPhone
31
赞!已 star
Troevil
Troevil
Dec 29, 2016
32
不错,不知道会不会出 vue 版~
renyijiu
renyijiu
Dec 29, 2016
33
不错不错,赞一个
zdhxiong
zdhxiong
OP
Dec 29, 2016
34
@Troevil 暂时没计划出 vue 版
anthozoan77
anthozoan77
Dec 29, 2016
35
厉害!
fhefh
fhefh
Dec 29, 2016
36
楼主 view-source:http://www.mdui.org/docs/ 这个页面
<html>和<body> 两个标签 貌似没有闭合
xiningxiao
xiningxiao
Dec 29, 2016 via iPhone
37
mark 一下
yrom
yrom
Dec 29, 2016
38
这个得赞一下
zdhxiong
zdhxiong
OP
Dec 29, 2016
39
@fhefh HTML5 中这俩标签可以不闭合的。
run2
run2
Dec 29, 2016
40
http://www.mdui.org/docs/textfield 含图标 message 样式有点怪啊
RobertYang
RobertYang
Dec 29, 2016 via Android
41
棒
wq2016
wq2016
Dec 29, 2016
42
666
U2FsdGVkX1
U2FsdGVkX1
Dec 29, 2016
43
很棒的框架
已收藏
zdhxiong
zdhxiong
OP
Dec 29, 2016
44
@sobigfish 那是个多行文本框,图标会保持和文本框底部对齐, message 文本在文本框顶部,和上面的单行文本框看起来不一样,但应该没什么问题。
hebeiround
hebeiround
Dec 29, 2016 via iPhone
45
已收藏 很棒
itfanr
itfanr
Dec 29, 2016 via Android
46
很棒
run2
run2
Dec 29, 2016
47
@zdhxiong
确实很棒,也很全面
mdui-card-media-covered-gradient 貌似渐变不明显
话说 0.26 这些在 less 里都是写死的啊
zdhxiong
zdhxiong
OP
Dec 29, 2016
48
@sobigfish 可能那张图片刚好是下面颜色深,导致渐变看起来不明显。现在的渐变应该是比较合适的。
0.26 这个是写死的。
mogita
mogita
Dec 29, 2016
49
nice and clean
cool and dry
xcatliu
xcatliu
Dec 29, 2016 via iPhone
50
看起来很不错,支持
xcatliu
xcatliu
Dec 29, 2016 via iPhone
51
@doubleflower 借楼推荐一下更轻量级的 css 框架, http://getmobicss.com
xcatliu
xcatliu
Dec 29, 2016 via iPhone
52
@doubleflower 抱歉手机回复的,@ 错人了
@kingcos 借楼推荐一下更轻量级的 css 框架, http://getmobicss.com
metrue
metrue
Dec 29, 2016
53
挺屌的。
xcatliu
xcatliu
Dec 30, 2016 via iPhone❤️1
54
可以推荐到 chuangzaoshi.com @designer
Yien
Yien
Dec 30, 2016 via iPhone
55
感谢分享
lufficc
lufficc
Dec 30, 2016 via Android
56
赞
designer
designer
Dec 30, 2016 via iPhone
57
赞
ClassicOldSong
ClassicOldSong
Dec 30, 2016 via Android
58
厉害了我的哥
已 star ,加油!
gogobody
gogobody
Dec 30, 2016 via Android
59
mark
blanu
blanu
Dec 30, 2016
60
相当棒!连按下去减慢涟漪的效果都有做!用来撸小应用那还不是不要不要的,爽~
xrlin
xrlin
Dec 30, 2016
61
star ,很不错啊,下次尝试使用下
Cabana
Cabana
Dec 30, 2016 via Android
62
已 start ,等会在自己实验田试试…
lzsadam
lzsadam
Dec 30, 2016
63
很用心,非常棒,已经 star
unique
unique
Dec 30, 2016
64
很棒的前端项目,已 star
Hucai
Hucai
Dec 30, 2016
65
对于我这种菜鸟新手来说,太棒了,文档也很棒
hronro
hronro
Dec 30, 2016
66
赞一个!
lwbjing
lwbjing
Dec 30, 2016
67
建议前缀用 md mdui 要多打两个...
shingoxray
shingoxray
Dec 30, 2016
68
非常棒,很轻量,+*
CrispElite
CrispElite
Dec 30, 2016
69
厉害厉害 ,应该花了不少时间和精力 赞
VtoEXL
VtoEXL
Dec 30, 2016
70
很好看
LWXYFER
LWXYFER
Dec 30, 2016
71
不了解 gzip , 但是从 CSS 体积从 240.52KB 到 26.4KB , 这么高压缩率啊。
zdhxiong
zdhxiong
OP
Dec 30, 2016
72
@LWXYFER 因为 CSS 中大部分是各种主题,不同主题的代码只有颜色是不同的,其他都相同。 gzip 会把相同的内容压缩掉。
qping
qping
Dec 30, 2016
73
咨询个问题,像 a 标签之类的下划线颜色可以改吗
qping
qping
Dec 30, 2016
74
不用回我了,仔细看了下文档,<body class="mdui-theme-primary-indigo mdui-theme-accent-indigo">,就可以了 :)
mink
mink
Dec 30, 2016
75
很漂亮以后就用这套了 。
cst4you
cst4you
Dec 30, 2016
76
看成了 ADUI
takeoffyoung
takeoffyoung
Dec 30, 2016
77
已 star
Email
Email
Dec 30, 2016
78
虽然不是前端工程师 但是要给个赞
baozijun
baozijun
Dec 30, 2016
79
很是感谢,超级赞
daiv
daiv
Dec 30, 2016
80
还是感觉 layui 更适合一点,今天刚刚发现 layui
greenskinmonster
greenskinmonster
Dec 30, 2016
81
不得不说,确实挺厉害的。
Geeker
Geeker
Dec 30, 2016
82
额,这和官方的感觉没什么区别啊,楼上的一群人难道都没看过官方的? https://getmdl.io/
wolfan
wolfan
Dec 30, 2016
83
看着确实比官方的 MDL 方便点,而且也丰富不少,反正是图省事偷懒的好帮手啊~
wolfan
wolfan
Dec 30, 2016
84
内啥,为什么俺这那个涟漪效果没有呐,试了好几遍了,没看到呐。
designer
designer
Dec 30, 2016
85
已收录在创造狮-开发者框架
Pastsong
Pastsong
Dec 30, 2016
86
是我见过的 Web 框架里对规范实现最好的一版了
conglovely
conglovely
Dec 30, 2016
87
棒棒哒,已 Star
zdhxiong
zdhxiong
OP
Dec 30, 2016
88
@wolfan 你用的什么版本的浏览器? 你看下控制台报什么错误。
zzutmebwd
zzutmebwd
Dec 30, 2016
89
很棒 感谢
rekulas
rekulas
Dec 30, 2016
90
cool 感觉比 bootstrap 更有价值
exoticknight
exoticknight
Dec 30, 2016
91
赞啊但是涟漪效果没有?控制台没报错,看起来是没有了 mdui-ripple-wave 类?
tracymcladdy
tracymcladdy
Dec 30, 2016
92
真的好棒!
Nothentai
Nothentai
Dec 30, 2016
93
真的好棒_(:з」∠)_
forest520
forest520
Dec 30, 2016
94
很喜欢,感谢!
arzusyume
arzusyume
Dec 30, 2016
95
不晓得为啥我直接访问和挂代理访问, demo 页又拍云的资源都加载不出来
loveship
loveship
Dec 30, 2016 via Android
96
看起来还不错,但是每个类都加个 mdui...stupid
zdhxiong
zdhxiong
OP
Dec 30, 2016
97
@exoticknight 涟漪效果只要一个 mdui-ripple 类就行。你用什么版本的浏览器看不到涟漪效果?
zdhxiong
zdhxiong
OP
Dec 30, 2016
98
@arzusyume 你可以看下这个页面: http://pubstatic.b0.upaiyun.com/cdn-health.html 。看是不是你的网络问题
zdhxiong
zdhxiong
OP
Dec 30, 2016
99
@loveship 加前缀可以避免和其他库混用时产生冲突,现在有不少主流框架(比如: purecss 、 Material Design Lite 、 amazeui 、 uikit 等)都是这么做的,个人认为还是有必要的。
iq72
iq72
Dec 30, 2016
100
css , js ,背景图加载不出来
1  2  
❮ ❯
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   3018 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 231ms · UTC 11:33 · PVG 19:33 · LAX 03:33 · JFK 06:33
♥ Do have faith in what you're doing.