V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zdhxiong
V2EX  ›  分享创造

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

  zdhxiong ·
zdhxiong · 2016-12-29 13:59:47 +08:00 · 29099 次点击
这是一个创建于 2885 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

且没有任何依赖

响应式

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

第 1 条附言  ·  2017-04-28 15:35:58 +08:00

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

  • 内置了一个 DOM 操作库,拥有和 jQuery 类似的语法,包含 CSS 选择器、DOM 操作、事件等功能。可以通过 mdui.JQ 来调用该库。
  • 修复在触控屏上,浮动操作按钮、滑块、Tab 选项卡、菜单等组件无法用鼠标操作的 bug。
148 条回复    2020-01-19 16:16:04 +08:00
1  2  
ss098
    1
ss098  
   2016-12-29 14:06:03 +08:00
很棒,看你 Demo 的时候被吓了一跳。
lwjcjmx123
    2
lwjcjmx123  
   2016-12-29 14:06:52 +08:00 via Android
先 mark 一下,回头给你个星星
Famio
    3
Famio  
   2016-12-29 14:10:54 +08:00
感謝!已經試用。
shellcodecow
    4
shellcodecow  
   2016-12-29 14:12:22 +08:00
文档写的不错~~ 特别是右上角有个界面展现的案列
已 Star
Famio
    5
Famio  
   2016-12-29 14:14:59 +08:00
已 star ,另外希望文檔能加入檢索功能,再次感謝
luo123qiu
    6
luo123qiu  
   2016-12-29 14:15:34 +08:00
很棒, star 支持。
aaronly
    7
aaronly  
   2016-12-29 14:17:36 +08:00 via iPhone
奈斯。回去给你 star
learnshare
    8
learnshare  
   2016-12-29 14:35:08 +08:00
细节不错
lynth
    9
lynth  
   2016-12-29 15:04:58 +08:00
`star`
ourstars
    10
ourstars  
   2016-12-29 15:07:26 +08:00 via iPhone
看着好棒👍
denghongcai
    11
denghongcai  
   2016-12-29 15:19:19 +08:00
棒极了
ashfinal
    12
ashfinal  
   2016-12-29 15:22:14 +08:00
已 star
scys
    13
scys  
   2016-12-29 15:38:22 +08:00
很好,无依赖我喜欢这种库 :D
tlv2013
    14
tlv2013  
   2016-12-29 15:39:25 +08:00
已 star
chenyiping1995
    15
chenyiping1995  
   2016-12-29 15:41:25 +08:00 via Android
为什么感觉很像 materialize 框架……?
Slyutae
    16
Slyutae  
   2016-12-29 15:43:23 +08:00
好棒,马上去 star
owlsec
    17
owlsec  
   2016-12-29 15:46:32 +08:00
star
DoraJDJ
    18
DoraJDJ  
   2016-12-29 15:53:58 +08:00 via Android
不错,已 star
ipeony
    19
ipeony  
   2016-12-29 16:01:03 +08:00
赞 b( ̄▽ ̄)d
fy
    20
fy  
   2016-12-29 16:05:12 +08:00
很棒 已 star
kingcos
    21
kingcos  
   2016-12-29 16:11:01 +08:00 via iPhone
好赞! Star !
(想借楼问个小问题…可能问题比较粗糙…
最近在写课程设计,但不想仅限于课设。
准备写一个前后端分离的网站吧,未来可能自己再开发手机端,后端准备用 Spring Boot ,只提供 RESTFUL API 接口,这个已经基本弄好了。那么前端要用什么框架比较好呢?… UI 框架在考虑 Bootstrap 4 或者就这个也很好,好像还要用 Ajax …总之谢谢啦…)
kingsleydon
    22
kingsleydon  
   2016-12-29 16:11:36 +08:00 via Android
star 文档很棒
flyingfz
    23
flyingfz  
   2016-12-29 16:11:51 +08:00
基于 Material Design 的前端框架, 在手机浏览器上的性能都很差。
----------------
我测试过: 在微信里 查看 demo ,几乎是一帧一帧的显示出来, chrome 会好一些,但也能感受到卡。
Material Design 确实很喜欢, 但手机上性能这么差,没法用啊。
flyingfz
    24
flyingfz  
   2016-12-29 16:12:26 +08:00
先 star 下。
Tuisku
    25
Tuisku  
   2016-12-29 16:12:29 +08:00
文档中:
涟漪颜色这里, WHITE 和 BLACK ,是不是弄反了?
zdhxiong
    26
zdhxiong  
OP
   2016-12-29 16:23:17 +08:00   ❤️ 1
@Tuisku 文档写错了,已经改过来了
doubleflower
    27
doubleflower  
   2016-12-29 17:21:47 +08:00   ❤️ 1
意外发现质量不错。


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