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

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

  zdhxiong ·
zdhxiong · 2016 年 12 月 29 日 · 30371 次点击
这是一个创建于 3305 天前的主题,其中的信息可能已经有所发展或是发生改变。

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 年 4 月 28 日

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

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

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

这种文档一般是怎么生成的?
yhxx
    147
yhxx  
   2018 年 6 月 26 日
官网好像挂了?
wfdaj
    148
wfdaj  
   2020 年 1 月 19 日
@zdhxiong 请问如何使用 gulp 自定义 mdui ?
按照网站提示,命令行是这样吗? gulp --custom -primary-colors:teal ?
错误提示是:ReferenceError: primordials is not defined
1  2  
关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   5329 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 56ms · UTC 06:04 · PVG 14:04 · LAX 22:04 · JFK 01:04
♥ Do have faith in what you're doing.