Κλάσεις στυλ για συστατικά στοιχεία

Μπορείτε να δημιουργήσετε μια καθορισμένη λίστα στυλ που μπορούν να εφαρμοστούν στα συστατικά στοιχεία σας από τους χρήστες.

Έχοντας μια προκαθορισμένη λίστα στυλ για τα συστατικά στοιχεία σας, ακολουθείτε το ίδιο μοντέλο με τον καθορισμό κλάσεων στυλ για συστατικά στοιχεία που παρέχονται από το Oracle Content Management μέσω των αρχείων σχεδίασης ενός θέματος. Ονομάζετε τις προσαρμοσμένες κλάσεις στυλ στο αρχείο appinfo.json για το συστατικό στοιχείο.

Ορίζετε πρόσθετα στυλ στα αρχεία design.css και design.json . Το αρχείο json παρέχει μια αντιστοιχία από το όνομα που θα εμφανιστεί στο περιβάλλον χρήστη στο όνομα της υποκείμενης πραγματικής κλάσης css και το αρχείο css παρέχει τις λεπτομέρειες για κάθε κλάση στυλ.

Το αρχείο design.json έχει την ακόλουθη δομή για συστατικά στοιχεία:

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

Κάθε μία από τις καταχωρήσεις "styles":[] μπορεί να περιέχει μια λίστα στυλ για το συγκεκριμένο συστατικό στοιχείο. Το "name" μπορεί είτε να είναι μια αναφορά σε μια ενσωματωμένη τοπικά προσαρμοσμένη συμβολοσειρά ή μια καθορισμένη τιμή για χρήση. Για παράδειγμα, το συστατικό στοιχείο Τίτλος παρέχει αυτά τα προεπιλεγμένα στυλ:

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

Οι τιμές ονομάτων αντιστοιχίζονται στις πραγματικές λέξεις που θα εμφανίζονται στο περιβάλλον χρήστη, με αυτόν τον τρόπο:

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

Το αρχείο css παρέχει τους ορισμούς για τις τιμές κλάσεων:

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

Ως παράδειγμα, στο αρχείο design.json του θέματος, μπορείτε να προσθέσετε καταχωρήσεις για το συστατικό στοιχείο σας με βάση την τιμή initialData.compomentId που ορίζετε στο αρχείο components.json:

"componentId": "news-article"

Οι αντίστοιχες καταχωρήσεις στο αρχείο design.json θα είναι αυτές:

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

Οι αντίστοιχες καταχωρήσεις στο αρχείο design.css θα είναι αυτές:

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