CODEWITHSUNDEEP
javascriptmaterial-designaem
John P
John P

Reputation: 409

How To Add Material Design Components To Adobe Experience Manager

I have been given the task of coding a component in Adobe Experience Manager using Material Design for the style and functionality. I've gotten halfway there - I've imported the CSS for Material Design into my AEM component, and that is working correctly.

However, I cannot figure out how to get the Javascript parts of Material Design to work in my component. As I understand it, you have to add Javascript files one by one into your clientlib folder, and then add them to your js.txt file.

Material Design has dozens and dozens of individual JS files in their library, and I can't imagine that I need to add them all one-by-one to my clientlib.

Any tips on getting Material Design to work with AEM?

Upvotes: 0

Views: 691

Answers (1)

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

If I understand you question correctly, you want to include the material component JS from the library you referenced: material-components-web

to do that, you can download the complete minified library from this link: https://unpkg.com/material-components-web/dist/material-components-web.min.js which I found following the material-component getting started guide you can also include it from their published npm dependency (if you have an npm project).

you can include the JS in your current clientlib or create a clientlib with that JS included (will not go into detail on how to create clientlibs as this is not the question)

Alternatively, if you don't want to include the whole material library and you would rather choose what components are included in your clientlib you'll have to create a bundle through WebPack or any other JS bundler, WebPack is the most popular. It would take a very long answer to explain WebPack, google around for that and you'll find many example configs and projects. I found this repo which has a starter project for material components: https://github.com/vardius/web-components-webpack-es6-boilerplate

Upvotes: 1

Related Questions