Stilklasser for komponenter

Du kan opprette en definert liste over stiler som kan brukes i komponentene dine av brukere.

Når du skal ha en forhåndsdefinert liste over stiler for komponenten, følger du den samme modellen som gjelder når du skal definere stilklasser for komponenter levert av Oracle Content Management via utformingsfilene for et tema. Du gir de egendefinerte stilklassene navn i filen appinfo.json for komponenten.

Du definerer flere stiler i filene design.css og design.json. Filen json inneholder en tilordning fra navnet som vises i brukergrensesnittet, til det faktisk underliggende css-klassenavnet, og filen css inneholder detaljene for hver stilklasse.

Filen design.json har følgende struktur for komponenter:

{
    "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": []
        }
    }
}

Hver av oppføringene for "styles":[] kan inneholde en liste over stiler for denne bestemte komponenten. Oppføringen for "name" kan være en referanse til en innebygd lokalisert streng eller en angitt verdi som skal brukes. Komponenten Title inneholder for eksempel disse standardstilene:

{    
    "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"
               }
]
}

Verdiene for navn tilordnes til de faktiske ordene som skal vises i brukergrensesnittet, på denne måten:

    "COMP_STYLE_FLAT": "Flat",
    "COMP_STYLE_HIGHLIGHT": "Highlight",
    "COMP_STYLE_DIVIDER": "Divider",

Filen css inneholder definisjonene for klasseverdiene:

    .scs-title-default-style {
      color: #333333;
      display: block;
      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size: 24px;
      font-weight: normal;
                             }

I filen design.json for temaet kan du for eksempel legge til oppføringer for komponenten basert på verdien for initialData.compomentId du definerer i filen components.json:

"componentId": "news-article"

De tilsvarende oppføringene i filen design.json blir som følger:

"componentStyles": {
        "news-article": {
                "styles": [{
                          "name": "News Article 1",
                          "class": "news-article-default-style"
                  },
                  {
                          "name": "News Article 2",
                          "class": "news-article-style-1"
                  }]
        },

De tilsvarende oppføringene i filen design.css blir som følger:

.news-article-default-style .scs-image {…}
.news-article-style-1 .scs-image {…}