Môžete vytvoriť definovaný zoznam štýlov, ktoré používatelia môžu použiť pre komponent.
Vopred definovaný zoznam štýlov pre komponent ponúka rovnaký model ako definovanie tried štýlov pre komponenty, ktoré poskytuje služba Oracle Content Management prostredníctvom súborov návrhu motívu. Vlastné triedy štýlov pomenujete v súbore appinfo.json
pre komponent.
Ďalšie štýly definujete v súboroch design.css
a design.json
. Súbor json
umožňuje mapovanie z názvu, ktorý sa zobrazí v používateľskom rozhraní pre konkrétny príslušný názov triedy css
, a súbor css
poskytuje detaily pre každú triedu štýlu.
Súbor design.json
má nasledujúcu štruktúru pre komponenty:
{ "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": [] } } }
Každý záznam "styles":[]
môže obsahovať zoznam štýlov pre príslušný komponent. Vlastnosť "name"
môže byť buď referencia na vstavaný lokalizovaný reťazec, alebo zadaná hodnota určená na použitie. Komponent nadpisu napríklad poskytuje tieto predvolené štýly:
{ "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" } ] }
Hodnoty názvov sú mapované k príslušným slovám na zobrazenie v používateľskom rozhraní, napríklad takto.
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Súbor css
poskytuje definície pre hodnoty tried:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
V súbore design.json
motívu napríklad môžete pridať záznamy pre komponent na základe hodnoty initialData.compomentId
, ktorú definujete v súbore components.json
:
"componentId": "news-article"
Zodpovedajúce záznamy v súbore design.json
by boli nasledujúce:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
Zodpovedajúce záznamy v súbore design.css
by boli nasledujúce:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}