Triedy štýlov pre komponenty

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