组件的样式类

您可以创建定义的样式列表，以便用户可以将其应用于您的组件。

为您的组件准备预定义的样式列表采用的模型与 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"
               }
]
}

名称值映射到要在用户界面中显示的实际词语，例如：

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