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

Posted 2023-02-22

【中文标题】Web 的材料组件与 Angular 材料 2 [关闭]

【英文标题】：Material Components for the Web vs Angular Material 2 [closed]

【发布时间】：2017-05-02 00:29:08

【问题描述】：

最近，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 框架提供钩子以供使用。但我看不出重叠的原因，哪个会更有动力（阅读更多组件）。

【问题讨论】：

请注意，Angular 1.x 的 Angular Material 与 Angular 2+ 的 Angular Material2 不同。此外，Web 的 Material Components 与 Polymer 的 Material/Paper Elements 不同，后者是基于标准的 Web 组件。此问题中讨论的技术均不属于基于标准的“Web 组件”。

同意.. 感谢您的编辑

不要使用有棱角的材料 2. 很烂。我遇到了您的帖子，因为我正在寻找角度材料 2 的替代品。查看 Vue.js 的 vuetify 材料。 Angular 材质应该是这样的。

必须同意 Cent1pede。 Angular Material Design 2 的文档绝对是废话

【参考方案1】：

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

【参考方案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 努力使其更容易。如果可以不以角度方式进行操作，我相信我们可以在没有包装器的情况下开始。

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

优点

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

【讨论】：

关于自定义 Material2，它们依赖于您设置变量和使用 mixins。参见Theming your custom components 和源代码中变量的使用（例如toolbar）

@AlexKlaus 如果我没记错的话，您提供的链接只是更改颜色（主题）而不是更改组件的其他 CSS。我猜他们想出了@angular/cdk 来定制组件。我需要调查并更新我的答案。

我想指出的是，它们都以死板的方式编写，因此除了更改主题（阅读“颜色”）之外，您可以安全地做的事情并不多。您将 MDC for Web 称为“完全可定制”，但您甚至不能做一些简单的事情，例如更改工具栏高度（请参阅 here their answer 对此类功能请求）。

他们的主要卖点是严格遵守材料设计，所以很少有东西难以覆盖。但是当我说“完全可定制”时，我的意思是我们可以在由它创建的自定义组件中更改它们。在 Material 的情况下，它甚至没有添加到 scss 中，它们是在 javascript 中硬编码的，完全无法覆盖，我觉得扩展角度组件非常困难。你可以看到我问的问题..

自从您提供答案后，实施可能发生了变化，但是说 Angular Material 无法自定义是绝对错误的。他们甚至在文档中有专门的页面：material.angular.io/guide/customizing-component-styles

【参考方案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 增强设计以改进 人体工程学。

【参考方案4】：

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

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

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

(README)

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

【参考方案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 规范的同一个人进行协作和迭代。

【讨论】：

因此，Google 本身还没有明确的路径。我们仍然需要等到经理决定杀死哪个人。

我现在的看法是，他们（以及我们，开发人员）将更多的资源集中在 MDC-Web 上并将 material2 项目更改为简单的 ng2 会好得多MDC-Web 的包装器/适配器项目。

请用angular2为MDC-web实现做更复杂的例子

也是一个很好的例子github.com/trimox/angular-mdc-web

真的吗？维?看看这个vuetifyjs.com，它是完美的材料框架。