Stilklassen für Komponenten

Sie können eine definierte Liste mit Stilen erstellen, die Benutzer auf Ihre Komponente anwenden können.

Die vordefinierte Liste mit Stilen für eine Komponente folgt demselben Modell wie das Definieren von Stilklassen für Komponenten, die über die Designdateien eines Themes von Oracle Content Management bereitgestellt werden. Sie benennen die benutzerdefinierten Stilklassen in der Datei appinfo.json für die Komponente.

Sie definieren zusätzliche Stile in den Dateien design.css und design.json. Die json-Datei enthält eine Zuordnung vom Namen, der in der Benutzeroberfläche angezeigt wird, zum tatsächlichen zugrunde liegenden css-Klassennamen. Die css-Datei enthält die Details für jede Stilklasse.

Die Datei design.json hat die folgende Struktur für Komponenten:

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

Jeder der "styles":[]-Einträge kann eine Liste mit Stilen für die jeweilige Komponente enthalten. Der "name" kann eine Referenz zu einer integrierten lokalisierten Zeichenfolge oder ein spezifischer zu verwendender Wert sein. Beispiel: Die Titelkomponente stellt die folgenden Standardstile bereit:

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

Die Namenswerte werden wie folgt den tatsächlichen Wörtern zugeordnet, die in der Benutzeroberfläche angezeigt werden sollen:

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

Die css-Datei enthält die Definitionen für die Klassenwerte:

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

Beispiel: In der Datei design.json des Themes können Sie Einträge für Ihre Komponente basierend auf dem initialData.compomentId-Wert hinzufügen, den Sie in der Datei components.json definieren:

"componentId": "news-article"

Entsprechende Einträge in der Datei design.json:

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

Entsprechende Einträge in der Datei design.css:

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