您可以创建定义的样式列表,以便用户可以将其应用于您的组件。
为您的组件准备预定义的样式列表采用的模型与 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 {…}