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

最近，MDL（材料设计精简版）项目的后继产品作为Web的Material Components发布。其目标之一是“与其他JS框架和库无缝集成”。

另一个项目Angular Material2提供了专门用于Angular（v2 +）的材料设计组件。

这两个项目都在创建基于材质设计的UI组件。而且，它们具有准备就绪/ in-active-development的相似组件集，以及即将上市的相同组件集（在此处和此处列出）。

有人可以帮我了解两个项目之间的重叠之处，我应该为新项目选择哪一个？

从根本上讲，我确实知道Angular Material2将与Angular项目更加无缝和紧密地集成，而Web的Material Components将为要使用的多个JS框架提供挂钩。但是我看不到重叠的原因，以及哪一个会有更大的动力（阅读更多内容）。

全面披露：我正在研究Web的材料组件，因此我的看法可能有点偏颇:)

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

正如已经提到的，用于Web的材料组件（简称MDC-Web）的目标是为整个Web平台创建材料设计组件的规范实现。Angular / material2是一个出色的库-我们在Material Design团队中的许多人（包括我本人在内）对此做出了贡献-但它不属于非Angular2应用程序。此外，非Google库和框架（例如React，Aurelia，Vue等）都没有满足其需求的官方解决方案。

话虽如此，Angular2属于我们“整个Web平台”的范畴，因此我们绝对希望提供支持。在这两个项目的现阶段，我们可能都需要一些不需要angular / material2的组件，反之亦然。我鼓励您使用任何可以帮助您以最佳方式实现目标的库。那可能是angular / material2，可能是MDC-Web，或者说真的，可能两者都有。例如，您可以将我们的select组件与material2的组件一起使用，并且一切正常。如TL; DR中所述，angular-mdc-web是功能齐全的库，它将MDC-Web包装在惯用的angular2 + API中。

最后，MDC-Web是由Material Design团队本身开发的唯一库。因此，我们能够与创作Material Design规范的同一人合作并进行迭代。

更新（2018年3月16日）：

从@elDuderino提供的评论中，Material2似乎可以自定义。提供的答案是在Material cdk之前。

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

这两个框架现在都非常成熟。我在不同的项目中都使用了它们。我只花了一个星期就将一个项目从一个框架迁移到另一个框架。因此，我建议您同时尝试一下，看看您觉得哪种感觉舒适。

我将分享我的经验。它的观点和偏见。爱要纠正。

我们从头开始使用Angular。我们决定选择Material。我开始寻找更好的框架，并尝试了所有框架：Materialize，MDL，Angular Material 2，最后是Web的MDC。

这是我的观察，特别是对于Web的Material2 vs MDC。

材料2

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

• 缺点

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

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

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

  如何自定义角度材料2

  如何扩展角度组件样式

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

检查上面提供的更新

• 文档不好

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

  MDC用于网卡示例

  卡片的Material2示例

Web MDC

• 缺点

  • 不适用于Angular

  如果您想以Angular方式使用它，我们将无法立即开始使用它。需要为每个组件编写一个Angular包装器。可能需要一些努力。但是每个团队都可以花一些时间进行自定义，并且有第三方的努力使它变得更容易。如果可以不采取有角度的做法，我相信我们可以不用包装纸就可以开始。

  • 组件列表尚未完成（它们会随着时间的推移而增加，因此可以）

• 优点

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

对于考虑使用Angular Material 2的人们，“草图材质插件/主题编辑器”和“图库”工具仅适用于MDC。我走的路是相同的，我从Angular Material 2开始，随着Angular Ivy的最新介绍，我不确定团队将在Angular Material 2中投入多少精力。是一个安全的选择。

从最近的自述文件：

计划在2019年第一季度→2019年第二季度（1月-6月）发布的高级内容：

• 大部分Angular Material团队都借给了框架团队，以帮助Ivy。我们一直在使用Angular CDK和Angular Material测试来验证代码路径，并帮助调试将Google应用程序切换到新的渲染管道时出现的问题。
• 我们还与Material Design团队一起制定一项战略，以进行更深入的协作。一旦我们的计划进一步发展，我们将在此方面有更多的分享。
• 各种错误修正和次要功能改进。
• 为树组件的API增强设计以改善人体工程学。

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

计划于2018年第四季度（10月-12月）发布的高级内容：

• 改进我们自己的构建和自动化工具
• 修复错误并减少Google内部的技术负担
• 制定有关与MDC Web团队合作的长期计划
• 用于高级表格改进的设计（列大小调整，选择指令，内联编辑）

（自述）

大约20天前（2018年10月10日）已将其添加到自述文件中。
因此，未来的Angular Material可能只是Web MDC的某种Angular包装或Angular实现。

Angular Material 2仍然是过时的，不能正确实现材质规范。不要使用它。