Stijlklassen voor componenten

U kunt een gedefinieerde lijst met stijlen maken die door gebruikers kunnen worden toegepast op uw component.

Het hebben van een vooraf gedefinieerde lijst met stijlen voor uw component volgt hetzelfde model als het definiëren van stijlklassen voor componenten die worden geleverd met Oracle Content Management via de ontwerpbestanden van een thema. U geeft uw aangepaste stijlklassen een naam in het bestand appinfo.json voor de component.

U definieert aanvullende stijlen in de bestanden design.css en design.json. Het bestand json biedt een toewijzing van de naam die wordt weergegeven in de gebruikersinterface aan de werkelijke onderliggende naam van de css-klasse, en het bestand css bevat de details voor elke stijlklasse.

Het bestand design.json heeft de volgende structuur voor componenten:

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

Elke "styles":[]-ingang kan een lijst met stijlen bevatten voor die specifieke component. De "name"-ingang kan een verwijzing naar een ingebouwde, gelokaliseerde string zijn of een te gebruiken opgegeven waarde. De titelcomponent heeft bijvoorbeeld de volgende standaardstijlen:

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

De naamwaarden zijn toegewezen aan de werkelijke woorden die moeten worden weergegeven in de gebruikersinterface, als volgt:

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

Het css-bestand bevat de definities voor de klassenwaarden:

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

Voorbeeld: u kunt in het bestand design.json van het thema invoer toevoegen voor uw component op basis van de waarde initialData.compomentId die u definieert in het bestand components.json:

"componentId": "news-article"

De bijbehorende ingangen in het bestand design.json zijn de volgende:

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

De bijbehorende ingangen in het bestand design.css zijn de volgende:

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