Clase de stiluri pentru componente

Puteţi să creaţi o listă definită de stiluri care pot fi aplicate componentei dvs. de către utilizatori.

Realizarea unei liste predefinite de stiluri pt. componenta dvs. urmează acelaşi model ca definirea claselor de stiluri pt. componente, furnizată de Oracle Content Management prin fişierele de design ale unei teme. Vă denumiţi clasele de stiluri personalizate în fişierul appinfo.json pentru componentă.

Definiţi stiluri suplimentare în fişierele design.css şi design.json. Fişierul json furnizează o mapare din numele care va apărea în interfaţa cu utilizatorii în numele de bază efectiv al clasei css, iar fişierul css furnizează detaliile pentru fiecare clasă de stiluri.

Fişierul design.json are următoarea structură pentru componente:

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

Fiecare dintre intrările "styles":[] poate conţine o listă de stiluri pentru acea componentă specială. "name" poate reprezenta fie o referinţă la un şir localizat integrat, fie o valoare specificată de utilizat. De exemplu, componenta Titlu furnizează aceste stiluri prestabilite:

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

Valorile de nume sunt mapate la cuvintele reale care se afişează în interfaţa cu utilizatorii, ca de exemplu:

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

Fişierul css furnizează definiţiile pentru valorile clasei:

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

De exemplu, în fişierul design.json al temei, puteţi să adăugaţi intrări pentru componenta dvs. pe baza valorii initialData.compomentId pe care o definiţi în fişierul components.json:

"componentId": "news-article"

Intrările corespunzătoare din fişierul design.json ar fi acestea:

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

Intrările corespunzătoare din fişierul design.css at fi acestea:

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