logo标签列表

Material Components for the Web与Angular Material 2的区别

material-designangular-material2material-components
76
最近，MDL（Material Design Lite）项目的继任者Material Components for the Web推出。其中一个目标是“与其他JS框架和库无缝集成”。
另外还有一个项目Angular Material2，专门为 Angular（v2+）提供材料设计组件。
这两个项目都创建了基于材料设计的UI组件。此外，它们具有类似的组件已准备好/正在开发中，以及相同的即将推出的组件（在这里和这里列出）。
请帮我理解两个项目之间的重叠部分以及在新项目中应该选择哪一个？
从根本上说，我确实理解Angular Material2将更无缝地与Angular项目集成，而Material Components for the Web将为多个JS框架提供钩子来使用。但我不明白它们之间的重叠原因以及哪一个会有更多的动力（即更多的组件）。
请注意，针对 Angular 1.x 的 Angular Material 是与 Angular 2+ 的 Angular Material2 不同的实体。此外，Web 的 Material Components 与 Polymer 的 Material/Paper Elements 也是基于标准的 Web 组件不同。在本问题中讨论的技术都不符合基于标准的“Web 组件”的要求。 - Splaktar
1
同意。谢谢编辑。 - DeepakV
1
不要使用 Angular Material 2，它很差劲。我查看你的帖子是因为我正在寻找替代 Angular Material 2。请尝试 Vue.js 的 Vuetify Material。Angular Material 应该长成那个样子。 - jofftiquez
1
必须同意Cent1pede的观点。Angular Material Design 2的文档绝对是垃圾。 - Steven Hoff
5个回答
56

完全透明：我在Material Components for the web上工作，所以我的观点可能有些偏颇 :)

简而言之，使用任何能够帮助你以最高效的方式构建UI的库，或者将它们并行使用。查看我们的angular2集成示例 angular-mdc-web ，了解如何使用ng2包装MDC-Web组件。

正如已经提到的那样，Material Components for the web（缩写为MDC-Web）的目标是为整个Web平台创建一个Material Design组件的规范实现。Angular/material2是一个很棒的库——我们Material Design团队中的许多人，包括我自己，都为其做出了贡献——但它对非angular2应用程序具有排斥性。此外，非Google的库和框架，例如React、Aurelia、Vue等，没有官方的解决方案来满足它们的需求。

虽然如此，Angular2仍然属于我们“整个Web平台”的范畴，因此我们肯定希望支持它。在这两个项目的现阶段，我们可能有一些您需要但angular/material2没有的组件，反之亦然。我鼓励您使用最适合实现您目标的库。这可以是angular/material2、MDC-Web，或者两者都可以。例如，您可以在material2的组件旁边使用我们的选择组件，一切都应该能正常工作。正如TL;DR中提到的，angular-mdc-web是一个完整的库，以符合angular2+ API的方式包装了MDC-Web。
最后，MDC-Web是唯一由Material Design团队自己开发的库。因此，我们能够与编写Material Design规范的同一人员进行协作和迭代。
38
目前谷歌内部还没有明确的决策方案。我们仍需等待经理决定哪个项目必须终止。 - neclepsio
11
目前我看来，他们（以及我们开发人员）更好的做法是将更多资源集中用于MDC-Web，并将material2项目转变为MDC-Web的简单ng2包装器/适配器项目。 - Rodrigo Quesada
1
还有一个很好的例子 https://github.com/trimox/angular-mdc-web - Vlad
2
真的吗？Vue？看看这个 https://vuetifyjs.com/ 它是完美的材料框架。 - jofftiquez
1
很好的观点，但需要明确的一点是，MDC-Web不是框架，也永远不会尝试成为框架。它是一个用于Web平台上的Material Design UI库。你说得对，其中一个主要目标是与其他框架良好地互操作，这是我们在MDL方面得到了很多反馈的事情。我们也希望看到收敛和采用，但这是一个需要大量协调和规划的长期努力。我个人也非常有兴趣看到我们的社区最终构建出什么，特别是使用像React这样的非Google库。 - Travis Kaufman
显示剩余6条评论
18

更新（2018年3月16日）：

根据@elDuderino提供的评论，Material2似乎有一种自定义的方式。答案是在Material还没有cdk之前提供的。

https://material.angular.io/guide/customizing-component-styles

这两个框架现在都非常成熟。我在不同的项目中都使用它们。我只用了一周的时间就将一个项目从一个框架迁移到另一个框架。所以我建议尝试一下两者，看看哪个更符合您的需要。

我会分享我的经验。这是有偏见的观点。欢迎指正。

我们从头开始使用Angular。我们决定选择Material。

我开始寻找更好的框架并尝试了所有的框架：Materialize、MDL、Angular Material 2和最后的MDC for web。

以下是我的观察，特别是Material2与Web的MDC相比。

Material2

  • 优点
    • 现成的。一切都已准备就绪，可以开始工作
    • 架构接近于Angular

  • 缺点

    • 组件列表尚未完成（它们会随着时间而增加，所以没关系）
    • 定制化是不可能的

    我知道我们可以添加主题，这就是全部。所有组件的HTML和CSS都在Angular组件中添加。所以它被编译为JavaScript并在运行时应用。因此，没有办法覆盖其行为。我试了一个星期，但没做到。

    以下是我提出的问题（其中一个被标记为关闭，因为它似乎是在寻求意见-.-）

    如何自定义Angular Material 2

    如何扩展Angular组件样式

    当然他们没有得到任何答案，我也无法自定义它们。如果我错了，请指出。

    查看上面提供的更新

    Web 的 MDC

    • 缺点

      • 不适用于 Angular

      如果想要按照 Angular 的方式实现它，我们不能立即开始使用它。需要为每个组件编写 Angular 封装器。但是每个团队都能承担一些时间来自定义，并且有第三方努力使其更容易。如果可以不按照 Angular 的方式实现它，我相信我们可以在没有封装器的情况下开始。

      • 组件列表尚未完全（随着时间的推移，它们会完成，所以没关系）

    • 优点

      • 通用性高，不与框架绑定。始终安全投资。
      • 更多贡献，因为其他框架的开发人员也在使用它。随着时间的推移，它会得到更多的贡献和未来的保证（几乎是）。
      • 完全可定制。
      • 看起来只有 Material design 团队直接参与其中。
      • 还可以在移动设备上使用知识/样式。
      • 文档非常好。看起来花了很多精力和时间。
1
关于自定义Material2，它们依赖于您设置变量和使用mixin。请参阅Theming your custom components以及在源代码中使用变量（例如toolbar）。 - Alex Klaus
如果我没记错，您提供的链接仅用于更改颜色（主题），而不是更改组件的其他CSS。他们推出了@angular/cdk用于自定义组件，我猜。我需要进一步研究并更新我的答案。 - Vamshi
2
我想指出它们都是以一种严格的方式编写的，因此除了更改主题（即“颜色”），您几乎不能安全地做任何事情。您称Web的MDC为“完全可定制”，但您甚至无法执行简单的操作，例如更改工具栏高度（请参见此处他们对此类功能请求的回答）。 - Alex Klaus
他们的主要卖点是严格遵循材料设计，因此有些东西很难覆盖。但是当我说“完全可定制”时，我指的是我们可以在自定义组件中更改它们。在材料的情况下，它甚至没有添加到scss中，而是硬编码在javascript中，完全不可能覆盖，我觉得这很难扩展angular组件。你可以看到我问的问题... - Vamshi
也许自你回答以来实现方式已经改变，但说 Angular Material 不可定制绝对是错误的。他们甚至在文档中专门有一页介绍这个：https://material.angular.io/guide/customizing-component-styles - elDuderino
@Skeptor 实际上，Angular CDK代表“组件开发工具包”，为其他组件提供常用的模式实用程序。 - Edric
4
如果您正在考虑Angular Material 2，那么Sketch Material插件/主题编辑器和Gallery工具仅适用于MDC。我也曾经走过同样的路，一开始选择了Angular Material 2，但是随着Angular Ivy的近期推出，我不确定团队会在Angular Material 2上投入多少努力。因此，我转到了MDC，这是一个更安全的选择。
从最近的Readme中可以看到：
计划于Q1 → Q2 2019（1月-6月）实现的高级功能：
- 大部分Angular Material团队被借调到框架团队，帮助Ivy。 - 我们一直在使用Angular CDK和Angular Material测试来验证代码路径，并帮助调试将Google应用程序切换到新渲染管道时遇到的问题。 - 我们还在与Material Design团队合作，制定更深入的合作策略。一旦我们的计划进一步完善，我们将有更多内容分享。 - 各种修复错误和次要功能改进。 - 设计API增强，以改善树组件的人体工学特性。
2
似乎 Angular Material 团队计划与 MDC 团队合作：
“2018 年第四季度（10 月至 12 月）计划的高级内容包括： - 改进我们自己的构建和自动化工具 - 修复谷歌内部的一些错误和减少技术债务 - 着手长期计划如何与 MDC Web 团队合作 - 设计高级表格改进（列调整大小、选择指令、行内编辑）的方案。”
（README）
这是大约 20 天前（2018 年 10 月 10 日）添加到 readme 中的。因此，未来 Angular Material 可能只是 MDC for Web 的某种 Angular 封装或实现。
-1

Angular Material 2仍然过时，并且没有正确实现材料规范。不要使用它。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接