Olyan stílusok definiált listáját hozhatja létre, amelyeket a felhasználók alkalmazhatnak az összetevőjére.
Összetevőjéhez stílusok előre definiált listájának létrehozása ugyanazt a modellt követi, mint a stílusosztályok definiálása a témához tartozó design fájlokon keresztül az Oracle Content Management által biztosított összetevőkhöz. Az egyéni stílusosztályok elnevezését az összetevőhöz tartozó appinfo.json
fájlban hajtja végre.
További stílusokat a design.css
és a design.json
fájlban definiálhat. A json
fájl a felhasználói felületen megjelenő név hozzárendelését biztosítja a tényleges alapul szolgáló css
osztálynévhez, és a css
fájl az egyes stílusosztályok részleteit tartalmazza.
A design.json
fájl a következő struktúrával rendelkezik az összetevőknél:
{ "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": [] } } }
Minden "styles":[]
bejegyzés stílusok listáját tartalmazhatja az adott összetevőhöz. A "name"
beépített honosított karakterláncra mutató hivatkozás lehet, illetve a használni kívánt megadott érték. Például a cím összetevő a következő alapértelmezett stílusokat biztosítja:
{ "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" } ] }
A name értékeit a felhasználói felületen megjelenő tényleges szóra képezi le a rendszer, például:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
A css
fájl az osztályértékek definícióit adja:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
Példaként a témához tartozó design.json
fájlban bejegyzéseket vehet fel az összetevőjéhez az initialData.compomentId
értéke alapján, amelyet a components.json
fájlban definiál:
"componentId": "news-article"
A megfelelő bejegyzések a design.json
fájlban a következők lehetnek:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
A megfelelő bejegyzések a design.css
fájlban a következők lehetnek:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}