Třídy stylů pro komponenty

Můžete vytvořit definovaný seznam stylů, které mohou uživatelé používat pro vaši komponentu.

Předem definovaný seznam stylů pro vaši komponentu vychází ze stejného modelu jako definování tříd stylů pro komponenty poskytované službou Oracle Content Management prostřednictvím souborů s návrhy pro témata. V souboru appinfo.json pro komponentu můžete uvést své vlastní třídy stylů.

Další styly budete definovat v souborech design.css a design.json. Soubor json poskytuje mapování z názvu, který se zobrazí v uživatelském rozhraní, na skutečný základní název třídy css a soubor css poskytuje podrobnosti pro každou třídu stylů.

Soubor design.json má následující strukturu pro 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 položek "styles":[] může obsahovat seznam stylů pro konkrétní komponentu. Položka "name" může být buď odkaz na vestavěný lokalizovaný řetězec, nebo zadaná hodnota určená k použití. Například komponenta nadpis poskytuje tyto výchozí styly:

{    
    "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ázvů jsou mapovány na skutečná slova, která se zobrazí v uživatelském rozhraní, například takto:

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

Soubor css poskytuje definice pro hodnoty třídy:

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

Například do souboru design.json tématu můžete přidat položky pro komponentu na základě hodnoty initialData.compomentId, kterou definujete v souboru components.json:

"componentId": "news-article"

Odpovídajícími položkami v souboru design.json by byly:

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

Odpovídajícími položkami v souboru design.css by byly:

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