È possibile creare una lista di stili ben definita che potrà essere applicata dagli utenti al componente.
La disponibilità di una lista di stili predefinita per il componente ricalca il modello della definizione delle classi di stile per i componenti forniti da Oracle Content Management tramite i file di progettazione di un tema. I nomi delle classi di stili personalizzate vengono assegnati nel file appinfo.json
per il componente.
Gli stili aggiuntivi vengono definiti nei file design.css
e design.json
. Il file json
fornisce un mapping dal nome che verrà visualizzato nell'interfaccia utente al nome classe css
di base effettivo, mentre il file css
fornisce i dettagli per ogni classe di stile.
Il file design.json
ha la struttura seguente per i componenti:
{ "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": [] } } }
Ognuna delle voci "styles":[]
può contenere una lista di stili per il componente specifico a cui è associata. "name"
può essere un riferimento a una stringa localizzata built-in o un valore specificato da utilizzare. Ad esempio, il componente Titolo fornisce questi stili predefiniti:
{ "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" } ] }
I valori dei nomi vengono mappati alle parole effettive da visualizzare nell'interfaccia utente in questo modo:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Il file css
fornisce le definizioni per i valori delle classi:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
Ad esempio, nel file design.json
del tema è possibile aggiungere voci per il componente basate sul valore initialData.compomentId
definito nel file components.json
:
"componentId": "news-article"
Le voci corrispondenti nel file design.json
sarebbero queste:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
Le voci corrispondenti nel file design.css
sarebbero queste:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}