Develop a component with Style System in AEM | AEM Community Blog Seeding

[kautuk_sahni]

Develop a component with Style System in AEM by Vishang

Abstract

Creating a heading component with style system

Creating a heading component from title component.

Create a component called heading inside /apps/your-project-flder/components/content/~create component

create heading.html

${headingObject.title}

create heading.js
"use strict";
use(function() {
var titleByAuthor = granite.resource.properties["titleProperty"];
var jcrtitle = currentPage.title;
var pageName = currentPage.name;
var title = titleByAuthor || jcrtitle || pageName;

return {
title:title
};
});
Next thing we need is the dialog boxes. So copy cq:dialog and cq:design_dialog from title component.

Now in order to have style tab. Copy styletab node from any core component and paste it inside items node in cq:design_dialog

Add a styles in your clientlib-components folder. Create a clientlib folder for your component. create css.txt and styles.less files inside css folder as per the standard practice for adding styles to the component.

Read Full Blog

Develop a component with Style System in AEM

Q&A

Please use this thread to ask the related questions.