Classes de style pour les composants

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