Classi di stile per i componenti

È 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 {…}