Web 的材料组件与 Angular 材料 2 [关闭]

Question

最近，MDL（Material Design Lite）项目的继任者以Material Components for the Web启动。它的目标之一是“与其他 JS 框架和库的无缝集成”。

还有另一个项目Angular Material2 专门为 Angular (v2+) 提供材料设计组件。

这两个项目都在创建基于材料设计的UI 组件。此外，它们具有相似的组件集ready/in-active-development，以及与即将推出的相同组件集（列出了here 和here）。

有人能帮我理解两个项目之间的重叠之处吗？我应该为新项目选择哪一个？

从根本上说，我确实理解 Angular Material2 将与 Angular 项目更加无缝和紧密地集成，而用于 Web 的 Material Components 将为多个 JS 框架提供钩子以供使用。但我看不出重叠的原因，哪个会更有动力（阅读更多组件）。

Answer 1

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

Answer 2

更新（2018 年 3 月 16 日）：

从@elDuderino Material2 提供的 cmets 似乎有办法自定义 .提供的答案是在 Material 之前 cdk ..

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

这两个框架现在都非常成熟。我在不同的项目中使用它们。我只用了一周的时间就将一个项目从一个框架迁移到另一个框架。所以我建议两者都试一下，看看你觉得哪个舒服。

---

我会分享我的经验。它的固执己见和偏见。喜欢被纠正。

我们从头开始使用 Angular。我们决定使用材料。 我开始寻找更好的框架并尝试了所有这些：Materialize、MDL、Angular Material 2，最后是 MDC for web。

以下是我的观察，尤其是针对 Material2 与 MDC for Web 的对比。

材料2

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

• 缺点

  • 组件列表还没有完成（它们会随着时间的推移而消失，所以没关系）
  • 无法定制

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

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

  How to customize Angular Material 2

  How to Extend Angular Component style

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

检查上面提供的更新

• 文档不好

  让我们看一个例子。请参阅提供的示例数量。

  MDC for web card examples

  Material2 examples for Card

网页版 MDC

• 缺点

  • 不适用于 Angular

  如果您想使用 Angular 方式，我们无法立即开始使用它。需要为每个组件编写 Angular 的包装器。可能要费点力气。但是每个团队都可以花一些时间进行定制，并且有third party 努力使其更容易。如果可以不以角度方式进行操作，我相信我们可以在没有包装器的情况下开始。

  • 组件列表还没有完成（他们会随着时间的推移，所以没关系）

• 优点

  • 通用，不绑定到框架。投资始终安全。
  • 更多贡献，因为其他框架开发人员也使用它。随着时间的推移，它获得了更多的贡献和未来的证明（几乎）
  • 完全可定制。
  • 似乎只有框架材料设计团队直接参与
  • 也可以将知识/样式用于移动设备。
  • 文档很棒。看起来投入了很多精力和时间。

Answer 3

对于考虑使用 Angular Material 2 的人，Sketch Material Plugin/Theme Editor 和 Gallery 工具仅适用于 MDC。我在同一条道路上，我从 Angular Material 2 开始，随着最近对 Angular Ivy 的介绍，我不确定团队将在 Angular Material 2 上投入多少精力。我正在转向 MDC，它是一个安全的选择。

来自最近的自述文件：

计划在 2019 年第 1 季度至第 2 季度（1 月至 6 月）进行高级别的工作：

• Angular Material 团队的大部分成员都借给了框架团队 帮助常春藤。我们一直在使用 Angular CDK 和 Angular 用于验证代码路径并帮助调试问题的材料测试 将 Google 应用程序切换到新的渲染管道。
• 我们还与 Material Design 团队合作制定更深入协作的策略。一旦我们的计划进一步推进，我们将在这方面分享更多信息。
• 各种错误修复和小功能改进。
• 对树组件的 API 增强设计以改进 人体工程学。

Answer 4

Angular Material 团队似乎计划与 MDC 团队合作：

计划在 2018 年第 4 季度（10 月 - 12 月）推出高级别的产品：

• 改进我们自己的构建和自动化工具
• 修复错误并减少 Google 内部的一些技术债务
• 就如何与 MDC Web 团队合作制定长期计划
• 高级表格改进设计（列调整大小、选择指令、内联编辑）

(README)

这已在大约 20 天前（2018 年 10 月 10 日）添加到自述文件中。
所以很有可能，未来的 Angular Material 只是某种 Angular 包装器或 Web MDC 的 Angular 实现。

Answer 5

完全披露：我在 Material Components for the web 工作，所以我的意见可能有点偏颇:)

TL;DR 使用任何可以帮助您以最有效的方式构建 UI 的库，或者并排使用它们。查看我们的 angular2 集成示例angular-mdc-web，了解如何使用 ng2 包装 MDC-Web 组件。

如前所述，Web 的 Material Components（缩写。MDC-Web）的目标是为整个 Web 平台创建 Material Design 组件的规范实现。 Angular/material2 是一个优秀的库——我们 Material Design 团队中的许多人，包括我自己，都为它做出了贡献——但它对非 angular2 应用程序是排斥的。此外，React、Aurelia、Vue 等非谷歌库和框架没有官方解决方案来满足他们的需求。

话虽如此，Angular2 属于我们的“整个网络平台”范围，因此我们肯定希望支持它。在这两个项目的这个阶段，我们可能有一些你需要的组件，而 angular/material2 不需要，反之亦然。我鼓励您使用任何可以帮助您以最佳方式实现目标的库。这可能是 angular/material2，也可能是 MDC-Web，或者说实话，它可能两者兼而有之。例如，您可以在 material2 的组件旁边使用our select component，一切都应该可以正常工作。正如 TL;DR 中提到的，angular-mdc-web 是一个功能齐全的库，它将 MDC-Web 包装在一个惯用的 angular2+ API 中。

最后一点，MDC-Web 是唯一由 Material Design 团队自行开发的库。因此，我们能够与编写 Material Design 规范的同一个人进行协作和迭代。