Προσθήκη CSS για το συστατικό στοιχείο σας

Μπορείτε να προσθέσετε ένα CSS που θα παρέχει ένα προεπιλεγμένο στυλ για το συστατικό στοιχείο σας.

1. Προσθέστε ένα αρχείο design.css στον φάκελο assets του συστατικού στοιχείου σας, με τα ακόλουθα περιεχόμενα:

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }

2. Προσθέστε στο appinfo.json για να δηλώσετε το πρόθεμα κλάσης στυλ που θα χρησιμοποιηθεί για την εφαρμογή στυλ στο συστατικό στοιχείο σας. Αν προστεθεί ένα styleClassName του συστατικού στοιχείου h1, όταν αποτεθεί το συστατικό στοιχείο σας πάνω στη σελίδα, το προεπιλεγμένο στυλ θα είναι h1-component-default-style. Ακολουθούν τα νέα περιεχόμενα του αρχείου appinfo.json:

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "styleClassName":"h1-component",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

3. Ενημερώστε το render.js για να φορτώσετε το αρχείο CSS αντικαθιστώντας τη γραμμή 2 (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {) με την ακόλουθη γραμμή.

   define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) { 

   Σημείωση:

   Επειδή έχετε αλλάξει το αρχείο appinfo.json, πρέπει να κάνετε ανανέωση του προγράμματος περιήγησης και να προσθέσετε πάλι το συστατικό στοιχείο σας σε μια σελίδα για να επιλεγούν οι αλλαγές.