Создание компонента с системой стилей в AEM

🐣 Создание компонента заголовка с помощью системы стилей

Создание компонента заголовка из компонента title.

Создайте компонент с названием heading внутри /apps/ваш проект-flder/components/content/~create component

create heading.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>

создать 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
    };
});

Следующее, что нам нужно, это диалоговые окна. Поэтому скопируйте cq:dialog и cq:design_dialog из компонента title.

Теперь для того, чтобы иметь вкладку стиля. Скопируйте узел styletab из любого компонента ядра и вставьте его внутрь узла items в cq:design_dialog.

Добавьте стили в папку clientlib-components. Создайте папку clientlib для вашего компонента. Создайте файлы css.txt и styles.less в папке css в соответствии со стандартной практикой добавления стилей в компонент.

Мы используем нотацию BEM для создания стилей.
style.less

.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;
    }
}

После этого автор контента может создавать стили, добавляя стили к компоненту через политику компонента.
Примерно так 👇

После этого в компоненте появится символ карандаша ✎, который показывает различные назначенные стили.