AEM에서 스타일 시스템을 사용하여 구성 요소 개발

🐣 스타일 시스템으로 제목 구성 요소 만들기

제목 구성 요소에서 제목 구성 요소를 만듭니다.

/apps/your-project-flder/components/content/~create component 내부에 제목이라는 구성 요소를 만듭니다.

제목 만들기.html

<div class="cmp_heading_textbox" data-sly-use.headingObject="heading.js">
    <h1 class="cmp_heading_text" data-sly-element=${currentStyle.type}>${headingObject.title}</h1>
</div>

제목 만들기.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
    };
});

다음으로 필요한 것은 대화 상자입니다. 따라서 제목 구성 요소에서 cq:dialog 및 cq:design_dialog를 복사합니다.

이제 스타일 탭을 갖기 위해. 핵심 구성 요소에서 styletab 노드를 복사하여 cq:design_dialog의 항목 노드 안에 붙여넣습니다.

clientlib-components 폴더에 스타일을 추가하십시오. 구성 요소에 대한 clientlib 폴더를 만듭니다. 구성 요소에 스타일을 추가하는 표준 방법에 따라 css 폴더 안에 css.txt 및 styles.less 파일을 만듭니다.


BEM 표기법을 사용하여 스타일을 만듭니다.
스타일리스

.headingTextBox-dark {
    .cmp_heading_textbox {
    padding: 2px;
        background-color:#555555;
    }
    .cmp_heading_text {
    color: #ffffff;
    }
}
.headingTextBox-light {
    .cmp_heading_textbox {
    padding: 2px;
        background-color:#FFFFFF;
    }
    .cmp_heading_text {
    color: #555555;
    }
}
.headingTextBox-bordered {
    .cmp_heading_textbox {
    border: 2px solid #00b2b2;
    }
}
.headingText-center {
    .cmp_heading_text {
    text-align: center;
    }
}

완료되면 콘텐츠 작성자는 구성 요소 정책을 통해 구성 요소에 스타일을 추가하여 스타일을 만들 수 있습니다.
이런거 👇


완료되면 구성 요소에서 할당된 다양한 스타일을 나타내는 연필 ✎ 기호를 볼 수 있습니다.