Можно создать предварительно определенный список стилей, которые пользователи могут применить к компоненту.
Предварительное определение списка стилей для компонента аналогично определению классов стилей для компонентов, предоставляемых Oracle Content Management, посредством файлов проекта темы. Пользовательские классы стилей для компонента именуются в файле appinfo.json
.
Дополнительные стили определяются в файлах design.css
и design.json
. Файл json
обеспечивает сопоставление имени, которое будет отображаться в пользовательском интерфейсе, с фактическим базовым именем класса css
, а файл css
предоставляет сведения для каждого класса стилей.
Файл design.json
имеет следующую структуру для компонентов:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-txt": { "styles": [] }, "scs-divider": { "styles": [] }, "scs-button": { "styles": [] }, "scs-app": { "styles": [] }, "scs-spacer": { }, "scs-gallery": { "styles": [] }, "scs-youtube": { "styles": [] }, "scs-socialbar": { "styles": [] }, "scs-document": { "styles": [] } } }
Каждая запись "styles":[]
может содержать список стилей для конкретного компонента. Запись "name"
может быть ссылкой на встроенную локализованную строку или указанным значением, предназначенным использования. Например, компонент Title (Заголовок) содержит следующие стили по умолчанию:
{ "styles": [{ "name": "COMP_STYLE_FLAT", "class": "scs-title-default-style" }, { "name": "COMP_STYLE_HIGHLIGHT", "class": "scs-title-style-2" }, { "name": "COMP_STYLE_DIVIDER", "class": "scs-title-style-3" } ] }
Значения имен сопоставляются с фактическими словами для отображения в пользовательском интерфейсе, например следующим образом:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Файл css
предоставляет определения значений классов:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
Например, в файл design.json
темы можно добавить записи для своего компонента на основе значения initialData.compomentId
, определенного в файле components.json
:
"componentId": "news-article"
Соответствующие записи в файле design.json
будут иметь вид:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
Соответствующие записи в файле design.css
будут иметь вид:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}