如何将 Material 设计组件添加到 Adob​​e Experience Manager

How To Add Material Design Components To Adobe Experience Manager

我的任务是在 Adob​​e Experience Manager 中使用 Material Design 编写样式和功能的组件。我已经完成了一半 - 我已经将 CSS for Material Design 导入到我的 AEM 组件中,并且工作正常。

但是,我不知道如何让 Material 设计的 Javascript 部分在我的组件中工作。据我了解,您必须将 Javascript 个文件一个一个地添加到您的 clientlib 文件夹中,然后再将它们添加到您的 js.txt 文件中。

Material Design 在他们的库中有几十个单独的 JS 文件,我无法想象我需要将它们一个一个地添加到我的 clientlib

关于让 Material 设计与 AEM 一起工作的任何提示?

如果我理解你的问题是正确的,你想从你引用的库中包含 material 组件 JS:material-components-web

为此,您可以从此 link 下载完整的缩小库:https://unpkg.com/material-components-web/dist/material-components-web.min.js 我在 material-component getting started guide 之后发现 你也可以从他们发布的 npm 依赖项中包含它(如果你有一个 npm 项目)。

您可以在当前的 clientlib 中包含 JS,或者 create a clientlib 包含该 JS(不会详细介绍如何创建 clientlib,因为这不是问题所在)

或者,如果您不想包含整个 material 库,您更愿意选择包含在您的 clientlib 中的组件,您将必须通过 WebPack 或任何其他 JS 捆绑器创建一个捆绑包, WebPack 是最受欢迎的。解释 WebPack 需要很长的答案,google 为此,您会找到许多示例配置和项目。我发现这个 repo 有一个 material 组件的入门项目:https://github.com/vardius/web-components-webpack-es6-boilerplate