元件的樣式類別

您可以建立定義的樣式清單，讓使用者能夠套用至您的元件。

您元件的預先定義樣式清單應遵循與 Oracle Content Management 透過主題的設計檔案所提供元件之定義樣式類別相同的模型。請在元件的 appinfo.json 檔案中指定您自訂樣式類別的名稱。

如需定義額外樣式，請在 design.css 和 design.json 檔案中定義。json 檔案提供將在使用者介面顯示之名稱與 css 類別名稱下之實際名稱的對應，css 檔案則提供每個樣式類別的詳細資訊。

design.json 檔案的元件結構如下：

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

每個 "styles":[] 項目都可包含該特定元件的樣式清單。"name" 可以是內建本地化字串的參照，或是要使用的指定值。例如，「標題」元件提供以下預設樣式：

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

name 值會對應至使用者介面中顯示的實際內容，如下所示：

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

css 檔案提供類別值的定義：

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

例如，您可以在主題的 design.json 檔案中，根據在 components.json 檔案中定義的 initialData.compomentId 值，為您的元件新增項目：

"componentId": "news-article"

design.json 檔案中相對應的項目會是：

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

design.css 檔案中相對應的項目會是：

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