Stílusosztályok összetevőkhöz

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