Web与Angular Material 2的材料组件

时间：2016-12-16 08:54:24

标签： material-design angular-material2 material-components

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

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

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

有人可以帮我理解2个项目之间的重叠，以及我应该选择哪个新项目？

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

5 个答案:

答案 0 :(得分：47)

  

完全披露：我处理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是一个优秀的图书馆 - 包括我自己在内的材料设计团队中的许多人都为此做出了贡献 - 但它对非angular2应用程序是排他性的。此外，非Google图书馆和框架（如React，Aurelia，Vue等）都有 no 官方解决方案以满足他们的需求。

话虽如此，Angular2属于我们“整个网络平台”的范围，我们当然希望支持它。在这两个项目的这个阶段，我们可能有一些你需要的角度/材料2没有的组件，反之亦然。我鼓励您使用哪个库帮助您以最佳方式实现目标。这可能是角度/材料2，它可能是MDC-Web，或者老实说它可能是两者。例如，你可以在side material2的组件中使用our select component，事情应该可以正常工作。如TL中所述; DR，angular-mdc-web是一个功能齐全的库，它将MDC-Web包装在一个惯用的angular2 + API中。

最后，MDC-Web是唯一由Material Design团队自己开发的库。因此，我们可以与编写Material Design规范的人员进行协作并进行迭代。

答案 1 :(得分：17)

更新（2018年3月16日）：

来自@elDuderino提供的评论Material2似乎有办法自定义。提供的答案是在材料有cdk之前。

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

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

我将分享我的经验。它的观点和偏见。喜欢被纠正。

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

以下是我的观察，特别是对于Material2与MDC for Web。

料2

  • 的优点
    • 现成。一切都准备就绪并准备开始工作
    • 靠近Angular的架构

  • <强>缺点

    • 组件列表尚未完成（它们会花时间，所以没问题）
    • 无法自定义

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

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

    How to customize Angular Material 2

    How to Extend Angular Component style

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

检查上面提供的更新

MDC for Web

  • 缺点

    • Angular
      • 不适用

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

    • 组件清单尚未完成（它们会花时间，所以没关系）

  • <强>赞成

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

答案 2 :(得分：4)

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

摘自最近的自述文件：

计划在2019年第一季度→2019年第二季度（一月至六月）使用高级内容：

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

答案 3 :(得分：2)

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

  

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

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

（README）

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

答案 4 :(得分：-1)

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

相关问题
最新问题