Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list

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

Avatar

Administrator

BlogImage.jpg

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.

0 Replies