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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2912 天前的主题，其中的信息可能已经有所发展或是发生改变。

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。

mdui

material

轻量级

Design

148 条回复 • 2020-01-19 16:16:04 +08:00

1 2

❮

❯

ss098

2016-12-29 14:06:03 +08:00

很棒，看你 Demo 的时候被吓了一跳。

lwjcjmx123

2016-12-29 14:06:52 +08:00 via Android

先 mark 一下，回头给你个星星

Famio

2016-12-29 14:10:54 +08:00

感謝！已經試用。

shellcodecow

2016-12-29 14:12:22 +08:00

文档写的不错~~ 特别是右上角有个界面展现的案列
已 Star

Famio

2016-12-29 14:14:59 +08:00

已 star ，另外希望文檔能加入檢索功能，再次感謝

luo123qiu

2016-12-29 14:15:34 +08:00

很棒， star 支持。

aaronly

2016-12-29 14:17:36 +08:00 via iPhone

奈斯。回去给你 star

learnshare

2016-12-29 14:35:08 +08:00

细节不错

lynth

2016-12-29 15:04:58 +08:00

`star`

ourstars

2016-12-29 15:07:26 +08:00 via iPhone

看着好棒👍

denghongcai

2016-12-29 15:19:19 +08:00

棒极了

ashfinal

2016-12-29 15:22:14 +08:00

已 star

scys

2016-12-29 15:38:22 +08:00

很好，无依赖我喜欢这种库 :D

tlv2013

2016-12-29 15:39:25 +08:00

已 star

chenyiping1995

2016-12-29 15:41:25 +08:00 via Android

为什么感觉很像 materialize 框架……？

Slyutae

2016-12-29 15:43:23 +08:00

好棒，马上去 star

owlsec

2016-12-29 15:46:32 +08:00

star

DoraJDJ

2016-12-29 15:53:58 +08:00 via Android

不错，已 star

ipeony

2016-12-29 16:01:03 +08:00

赞 b(￣▽￣)d

2016-12-29 16:05:12 +08:00

很棒已 star

kingcos

2016-12-29 16:11:01 +08:00 via iPhone

好赞！ Star ！
（想借楼问个小问题…可能问题比较粗糙…
最近在写课程设计，但不想仅限于课设。
准备写一个前后端分离的网站吧，未来可能自己再开发手机端，后端准备用 Spring Boot ，只提供 RESTFUL API 接口，这个已经基本弄好了。那么前端要用什么框架比较好呢？… UI 框架在考虑 Bootstrap 4 或者就这个也很好，好像还要用 Ajax …总之谢谢啦…）

kingsleydon

2016-12-29 16:11:36 +08:00 via Android

star 文档很棒

flyingfz

2016-12-29 16:11:51 +08:00

基于 Material Design 的前端框架，在手机浏览器上的性能都很差。
----------------
我测试过：在微信里查看 demo ，几乎是一帧一帧的显示出来， chrome 会好一些，但也能感受到卡。
Material Design 确实很喜欢，但手机上性能这么差，没法用啊。

flyingfz

2016-12-29 16:12:26 +08:00

先 star 下。

Tuisku

2016-12-29 16:12:29 +08:00

文档中：
涟漪颜色这里， WHITE 和 BLACK ，是不是弄反了？

zdhxiong

2016-12-29 16:23:17 +08:00

@Tuisku 文档写错了，已经改过来了

doubleflower

2016-12-29 17:21:47 +08:00

意外发现质量不错。

不过做应用大家都是用 vue/react 之类的组件了，纯 css 组件不方便。

jas0ndyq

2016-12-29 17:24:27 +08:00 via iPhone

厉害

phoenixlzx

2016-12-29 19:33:19 +08:00

Star 已送，最近大概会拿来做个页面(๑•̀ω•́)✧

greatghoul

2016-12-29 19:39:58 +08:00

很赞很赞

SorryChen

2016-12-29 19:51:04 +08:00 via iPhone

赞！已 star

Troevil

2016-12-29 19:59:12 +08:00

不错,不知道会不会出 vue 版~

renyijiu

2016-12-29 20:21:53 +08:00

不错不错，赞一个

zdhxiong

2016-12-29 20:22:32 +08:00

@Troevil 暂时没计划出 vue 版

anthozoan77

2016-12-29 20:24:51 +08:00

厉害！

fhefh

2016-12-29 20:46:57 +08:00

楼主 view-source:http://www.mdui.org/docs/ 这个页面
<html>和<body> 两个标签貌似没有闭合

xiningxiao

2016-12-29 20:52:32 +08:00 via iPhone

mark 一下

yrom

2016-12-29 21:23:27 +08:00

这个得赞一下

zdhxiong

2016-12-29 21:24:27 +08:00

@fhefh HTML5 中这俩标签可以不闭合的。

sobigfish

2016-12-29 21:26:50 +08:00

http://www.mdui.org/docs/textfield 含图标 message 样式有点怪啊

RobertYang

2016-12-29 21:29:11 +08:00 via Android

棒

wq2016

2016-12-29 21:38:18 +08:00

666

U2FsdGVkX1

2016-12-29 22:15:34 +08:00

很棒的框架
已收藏

zdhxiong

2016-12-29 22:19:05 +08:00

@sobigfish 那是个多行文本框，图标会保持和文本框底部对齐， message 文本在文本框顶部，和上面的单行文本框看起来不一样，但应该没什么问题。

hebeiround

2016-12-29 22:21:20 +08:00 via iPhone

已收藏很棒

itfanr

2016-12-29 22:25:19 +08:00 via Android

很棒

sobigfish

2016-12-29 22:35:04 +08:00

@zdhxiong
确实很棒，也很全面
mdui-card-media-covered-gradient 貌似渐变不明显
话说 0.26 这些在 less 里都是写死的啊

zdhxiong

2016-12-29 22:57:22 +08:00

@sobigfish 可能那张图片刚好是下面颜色深，导致渐变看起来不明显。现在的渐变应该是比较合适的。
0.26 这个是写死的。

ck65

2016-12-29 23:37:48 +08:00

nice and clean
cool and dry

xcatliu

2016-12-29 23:45:16 +08:00 via iPhone

看起来很不错，支持

xcatliu

2016-12-29 23:46:53 +08:00 via iPhone

@doubleflower 借楼推荐一下更轻量级的 css 框架， http://getmobicss.com

xcatliu

2016-12-29 23:48:14 +08:00 via iPhone

@doubleflower 抱歉手机回复的，@ 错人了
@kingcos 借楼推荐一下更轻量级的 css 框架， http://getmobicss.com

metrue

2016-12-29 23:53:24 +08:00

挺屌的。

xcatliu

2016-12-30 00:04:10 +08:00 via iPhone

可以推荐到 chuangzaoshi.com @designer

Yien

2016-12-30 00:15:27 +08:00 via iPhone

感谢分享

lufficc

2016-12-30 00:20:01 +08:00 via Android

designer

2016-12-30 00:36:15 +08:00 via iPhone

ClassicOldSong

2016-12-30 01:50:05 +08:00 via Android

厉害了我的哥
已 star ，加油！

gogobody

2016-12-30 01:52:32 +08:00 via Android

mark

blanu

2016-12-30 03:03:47 +08:00

相当棒！连按下去减慢涟漪的效果都有做！用来撸小应用那还不是不要不要的，爽~

xrlin

2016-12-30 08:30:36 +08:00

star ，很不错啊，下次尝试使用下

Cabana

2016-12-30 08:32:18 +08:00 via Android

已 start ，等会在自己实验田试试…

lzsadam

2016-12-30 09:10:40 +08:00

很用心，非常棒，已经 star

unique

2016-12-30 09:15:40 +08:00

很棒的前端项目，已 star

Hucai

2016-12-30 09:29:08 +08:00

对于我这种菜鸟新手来说，太棒了，文档也很棒

hronro

2016-12-30 09:29:26 +08:00

赞一个！

lwbjing

2016-12-30 09:32:29 +08:00

建议前缀用 md mdui 要多打两个...

shingoxray

2016-12-30 09:40:34 +08:00

非常棒，很轻量，+*

CrispElite

2016-12-30 09:41:55 +08:00

厉害厉害，应该花了不少时间和精力赞

VtoEXL

2016-12-30 09:43:47 +08:00

很好看

LWXYFER

2016-12-30 10:01:36 +08:00

不了解 gzip ，但是从 CSS 体积从 240.52KB 到 26.4KB , 这么高压缩率啊。

zdhxiong

2016-12-30 10:32:07 +08:00

@LWXYFER 因为 CSS 中大部分是各种主题，不同主题的代码只有颜色是不同的，其他都相同。 gzip 会把相同的内容压缩掉。

qping

2016-12-30 10:36:50 +08:00

咨询个问题，像 a 标签之类的下划线颜色可以改吗

qping

2016-12-30 10:40:20 +08:00

不用回我了，仔细看了下文档，<body class="mdui-theme-primary-indigo mdui-theme-accent-indigo">，就可以了 :)

mink

2016-12-30 10:42:42 +08:00

很漂亮以后就用这套了。

cst4you

2016-12-30 10:54:11 +08:00

看成了 ADUI

takeoffyoung

2016-12-30 11:33:23 +08:00

已 star

Email

2016-12-30 11:42:23 +08:00

虽然不是前端工程师但是要给个赞

baozijun

2016-12-30 11:42:57 +08:00

很是感谢，超级赞

daiv

2016-12-30 11:51:12 +08:00

还是感觉 layui 更适合一点，今天刚刚发现 layui

greenskinmonster

2016-12-30 11:57:59 +08:00

不得不说，确实挺厉害的。

Geeker

2016-12-30 12:20:40 +08:00

额，这和官方的感觉没什么区别啊，楼上的一群人难道都没看过官方的？ https://getmdl.io/

wolfan

2016-12-30 12:28:47 +08:00

看着确实比官方的 MDL 方便点，而且也丰富不少，反正是图省事偷懒的好帮手啊~

wolfan

2016-12-30 12:33:41 +08:00

内啥，为什么俺这那个涟漪效果没有呐，试了好几遍了，没看到呐。

designer

2016-12-30 12:59:54 +08:00

已收录在创造狮-开发者框架

Pastsong

2016-12-30 13:03:55 +08:00

是我见过的 Web 框架里对规范实现最好的一版了

conglovely

2016-12-30 13:16:04 +08:00

棒棒哒，已 Star

zdhxiong

2016-12-30 13:22:36 +08:00

@wolfan 你用的什么版本的浏览器？你看下控制台报什么错误。

zzutmebwd

2016-12-30 13:36:10 +08:00

很棒感谢

rekulas

2016-12-30 13:38:36 +08:00

cool 感觉比 bootstrap 更有价值

exoticknight

2016-12-30 13:46:10 +08:00

赞啊但是涟漪效果没有？控制台没报错，看起来是没有了 mdui-ripple-wave 类？

tracymcladdy

2016-12-30 13:51:04 +08:00

真的好棒！

Nothentai

2016-12-30 13:52:58 +08:00

真的好棒_(:з」∠)_

forest520

2016-12-30 13:55:17 +08:00

很喜欢，感谢！

arzusyume

2016-12-30 13:56:21 +08:00

不晓得为啥我直接访问和挂代理访问, demo 页又拍云的资源都加载不出来

loveship

2016-12-30 13:57:12 +08:00 via Android

看起来还不错，但是每个类都加个 mdui...stupid

zdhxiong

2016-12-30 14:03:12 +08:00

@exoticknight 涟漪效果只要一个 mdui-ripple 类就行。你用什么版本的浏览器看不到涟漪效果？

zdhxiong

2016-12-30 14:10:03 +08:00

@arzusyume 你可以看下这个页面： http://pubstatic.b0.upaiyun.com/cdn-health.html 。看是不是你的网络问题

zdhxiong

2016-12-30 14:22:05 +08:00

@loveship 加前缀可以避免和其他库混用时产生冲突，现在有不少主流框架（比如： purecss 、 Material Design Lite 、 amazeui 、 uikit 等）都是这么做的，个人认为还是有必要的。

100

iq72

2016-12-30 14:44:36 +08:00

css ， js ，背景图加载不出来

1 2

❮

❯