Vous pouvez créer une liste définie de styles que les utilisateurs peuvent appliquer à votre composant.
Une liste prédéfinie de styles pour votre composant suit le même modèle que celui des classes de style de définition pour les composants fournis par Oracle Content Management via les fichiers de conception d'un thème. Vous nommez vos classes de style personnalisées dans le fichier appinfo.json
du composant.
Vous définissez des styles supplémentaires dans les fichiers design.css
et design.json
. Le fichier json
fournit un mapping du nom qui apparaîtra dans l'interface utilisateur au nom de classe css
sous-jacent réel, tandis que le fichier css
fournit les détails de chaque classe de style.
Le fichier design.json
présente la structure suivante pour les composants :
{ "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": [] } } }
Chaque entrée "styles":[]
peut contenir une liste de styles pour ce composant. "name"
peut être une référence à une chaîne localisée intégrée ou une valeur indiquée à utiliser. Par exemple, le composant de titre fournit ces styles par défaut :
{ "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" } ] }
Les valeurs de nom sont mappées aux mots réels à afficher dans l'interface utilisateur, de cette manière :
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
Le fichier css
fournit les définitions des valeurs de classe :
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
Par exemple, dans le fichier design.json
du thème, vous pouvez ajouter des entrées pour votre composant en fonction de la valeur initialData.compomentId
que vous définissez dans le fichier components.json
:
"componentId": "news-article"
Les entrées correspondantes dans le fichier design.json
seraient les suivantes :
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
Les entrées correspondantes dans le fichier design.css
seraient les suivantes :
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}