如何将材料设计组件添加到Adobe Experience Manager

我已经给出了使用Material Design来编写Adobe Experience Manager中的组件的任务，以了解样式和功能。我已经完成了一半 - 我已经将材质设计的CSS导入到AEM组件中，并且工作正常。如何将材料设计组件添加到Adobe Experience Manager

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

材料设计在他们的库中有几十个和几十个单独的JS文件，我无法想象我需要将它们全部一一添加到我的clientlib。

获得材料设计与AEM一起使用的任何提示？

来源

2017-08-29 John P

你只需要捆绑包，而不是每个开发文件。 – TheRealMrCrowley

如果我理解你的问题正确的话，你要包括原料成分JS从图书馆您参考：material-components-web

要做到这一点，你可以从这个链接下载完整的缩小的库：https://unpkg.com/material-components-web/dist/material-components-web.min.js 我发现在材料组件getting started guide 之后，您还可以从发布的npm依赖项（如果您有npm项目）中包含它。

可以包括JS在你目前clientlib或create a clientlib与JS包括（不会进入关于如何创建clientlibs细节，因为这不是问题）

另外，如果你不想包括整个材料库，你宁愿选择你的clientlib中包含哪些组件，你将不得不通过WebPack或任何其他JS捆绑器创建一个捆绑包，WebPack是最流行的。要解释WebPack需要很长的回答，谷歌周围，你会发现很多示例配置和项目。我发现这个回购有一个材料组件的入门项目：https://github.com/vardius/web-components-webpack-es6-boilerplate

来源

2017-08-30 04:18:02

谢谢，艾哈迈德！这正是我最终选择的解决方案（使用unpkg.com链接获取缩小文件）。 –

@JohnP我真的很好奇你用材料Web组件构建的组件，它是偶然开源的吗？ –

不幸的是，我正在构建的实际组件不是开源的。它是大型专有客户支付门户网站的一部分。 –

如何将材料设计组件添加到Adobe Experience Manager

回答

相关问题