MDC – Material Design, Angular Material, MDC, MWC, Lit 的关系
前言
它们关系挺乱的, 而且不只是我一个人感觉乱
还有
所以这篇做一个整理吧.
Material Design
Google 的设计指南. 早年用于 Android Apps, 现在也用于 Web Application.
许多 Google products, e.g. Gmail, Google Ads, Tag Manager, Google Analytics 都基于这个设计概念 (不是说 100% follow, 只是大家都尽量保持一致性)
它的官网 : material.io (目前是 2.0 的版本)
2021 年 Google 发布了 Material Design 3.0 又称 Material You
目前它的官网: m3.material.io (3.0 版本)
Material Design 只是一个设计指南, 手册. 也就是一份 documentation 而已. Material 团队会先用 Figma 把它画出来 Material 3 Design Kit.
然后才依序去开发 Android > Flutter > Web 做出 UI 库让大家用. (没错, Web 排在最后...)
当然你不一定要用它的库, 你可以自己对着 Figma 或者原稿开发. 比如 React material-ui.
Angular Material
如同 React material-ui 那样, 一开始 Angular Team 也是自己对着 Material Design 手册开发的.
但后来, 由于实力不够, 加上 Material Design 的变化速度太快, 以至于开发跟不上. (没错, React 跟的上)
最后在 2019 年, Angular Material 决定和 Material Design 团队密切合作, 改用 Material Design 维护的库 (Material Components for the web 简称 MDC-Web) 来开发, 而不是直接对着手册做.
简单说就是自己做不来, 找个富丽堂皇的接口, 转去依赖其它人.
Youtube – NG Conf 2019 Day 3 CDK Is The Coolest Thing You Are Not Using With Jeremy Elbourn
Material Components for the web (MDC-Web)
上面已经有提到了 Android > Flutter > Web. 它们分别是
其实还有一个 IOS 被我省略了, 那不重要.
Web 目前 (2022年) 的库指的是 material-components-web. Angular Material 就是依赖着它.
它是一个宣称对框架友好的一个库. 但是目前几乎所有依赖它的框架都惨淡...
Angular Material 不在里面, 因为目前还在 experimental 阶段.
material-web (MWC)
依照 Google 的惯性, MDC-Web 视乎是捧不红了, 只能无情的把它杀掉, 扶持一个新的库.
来自 Github – When is Material Web 3 Coming?
这个 MWC 是基于 Web Component 概念做的. 内部依赖 Google Polymer 项目的 Lit (Lit 是一个 JS 库, 用来做 Web Component 开发的, 写法有点像 React)
关于 Lit 介绍:
Youtube – Lit 2.0 - The future of the web
Polymer’s Web Component Library LitElement and How it Compares to React
更新：2024-06-14
几天前 (2024 年 6 月) MWC 也被 Material 团队抛弃了...
Angular Material & MDC
Angular Material 花了 3 年也没有把 MDC 弄好, 2021 年说可能 Angular14 会 Live, 但就目前来看又食言了.
如果说 MDC 被放弃了, Angular Material 会很可怜, 因为搞了这么多年就是为了以后可以借力, 但后来发现家人根本不可靠...
但目前一切都还不确定, 毕竟 MWC 也才开始. 做不做得出来还不知道呢. 但可以肯定的说, Angular Material 肯定不会切换去 MWC.
至少短期内是不可能的. 也意味着短期内不可能有 material 3 的东西, 所有 material 3 解决的问题它们也不会去解决. 只会等. 恶性循环.
最后还是 React material-ui 走在了一个正确的方向.
更新：2024-06-14
MDC 确实是被放弃了，从 2022 年 5 月 v14 版本后就再没有发布新版本了，后来 Material Design 团队全身心投入在 MWC 里。
不过，虽然如此，Angular Material 是绝对不可能切换到 MWC 的，因为 MWC 依赖 Lit，而 Lit 和 Angular 算是竞品吧。
好在，MDC 虽然表面是死掉了，但其实背地里还有在更新，目前是 v15。我估计它之所以还会更新只是为了 Angular Material 而已，甚至可能就是 Angular Material 团队在维护它...
另外，几天前 (2024 年 6 月) MWC 也被 Material 团队抛弃了...所以你知道 Google 团队有多不可靠了吧？
总结
1. Material Design 是设计指南手册. 要落实它需要 Figma > Android > Flutter > Web > Framework > 我们的项目
2. MDC-Web 是目前实现 Material Design 2.0 的库. 没有计划支持 Material 3.0. Angular Material 依赖于它 (还是 experimental).
3. MWC 是目前实现 Material Design 3.0 的库. 还处于 beta 阶段, 预计今天可能会推出 1.0 版本.
4. Lit 是 Google Polymer 的项目, Polymer 一直都在推动 Web Component 技术. Lit 是一个 JS 库, 用来实现 Web Component, 写法有点像 React.
MDC – Material Design, Angular Material, MDC, MWC, Lit 的关系的更多相关文章
- Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)
转载请注明出处:http://blog.csdn.net/bbld_/article/details/40400031 翻译自:http://developer.android.com/trainin ...
- Material design之Material Theme
Material Theme提供了三方面的内容: 系统组件的颜色可以自定义更改 系统组件添加了触摸反馈动画效果 Activity切换动画效果 系统主题默认被定义在以下三个样式中: 使用Material ...
- 再不迁移到Material Design Components 就out啦
翻译自国外文档加自己理解 原文 我们最近宣布了 Material Design Components(MDC)1.1.0 ,这是一个库更新,为您的 Android 应用程序带来了 Material T ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- Top 15 - Material Design框架和类库(译)
_Material design_是Google开发的,目的是为了统一公司的web端和手机端的产品风格.它是基于很多的原则,比如像合适的动画,响应式,以及颜色和阴影的使用.完整的指南详情请看这里(ht ...
- ANDROID L——Material Design详解（UI控件）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...
- 从拟物化到扁平，再到Material Design
Google I/O 2014提出Material Design,这段时间听到不少关于Material Design的解读,至此Google已经定位了自己的设计语言,我个人看来就是Android和iO ...
- 【Android】进入Material Design时代
由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...
- Android5.0新特性——Material Design简介
Material Design Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干 ...
- [转]ANDROID L——Material Design详解（动画篇）
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...
随机推荐
- 解决方案 | pywintypes.com_error: (-2147221005, '无效的类字符串', None, None) --Python连接CAD报错真正解决思路！
1 背景 import pythoncom import win32com.client import math wincad = win32com.client.Dispatch("Aut ...
- oeasy教您玩转python - 003 - # - 继续运行
继续运行 回忆上次内容 在解释器里玩耍 print("Hello World") 1+1 编写了 py 文件 运行了 py 文件 这次我们继续丰富这个文件 分析 py 文件 我 ...
- SMU Summer 2024 第一周周报 （zhaosang）
学到了很多,不仅仅是学习方面的,在学校学跟在家寒假对比,天差地别吧. 补题的过程中收获满满,最近练习二分三分,栈队列单调栈等习题,题目不简单,努力学习中.. 打比赛也是,也有打的很惨的时候,我自己需要 ...
- Java JVM——13. 垃圾回收相关算法
1.生存还是死亡? 在堆里存放着几乎所有的 Java 对象实例,在 GC 执行垃圾回收之前,首先需要区分出内存中哪些是存活对象,哪些是已经死亡的对象.只有被标记为己经死亡的对象,GC 才会在执行垃圾回 ...
- ThinkPHP一对一关联模型的运用（ORM）
一.序言 最近在写ThinkPHP关联模型的时候一些用法总忘,我就想通过写博客的方式复习和整理下一些用法. 具体版本: topthink/framework:6.1.4 topthink/think- ...
- java实现二维码登录功能
本文采用Springboot工程进行开发,使用Google的zxing生成二维码,直接放代码: <?xml version="1.0" encoding="UTF- ...
- 查询当前网段的所有在用IP
查询当前网段的所有在用IP For /L %i in (0,1,254) DO ping 192.168.10.%i >>D:\IP.txt https://www.cnblogs.com ...
- 2、SpringBoot2之入门案例
2.1.创建Maven工程 2.1.1.创建空项目 2.1.2.设置项目名称和路径 2.1.3.设置项目sdk 2.1.4.项目初始状态 注意:需要关闭项目再重新打开,才能看到SpringBoot-P ...
- 【SpringMVC】08 Post请求乱码
这是以Post请求方式接受来的中文字符乱码 就像之前JavaWeb阶段的情况一样 所以,按照JavaWeb的方法,我们应该只需要在获取之前设置好编码处理就行了 可以先从这个处理方法开始试试,但是参数在 ...
- 【Docker】11 私有仓库
Docker的私有仓库也是一个镜像形式: docker pull registry 运行容器: run -d --name my-docker-repo -p 5000:5000 registry 访 ...