Stíluslap hozzáadása összetevőjéhez

Hozzáadhat egy olyan CSS-fájlt, amely egy alapértelmezett stílust biztosít az összetevő számára.

1. Adjon egy design.css fájlt az összetevője assets mappájához, amely a következőket tartalmazza:

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

2. Adja hozzá az appinfo.json fájlhoz, hogy deklarálja azt a stílusosztály-előtagot, amelyet az összetevő stílusának meghatározásához kell használni. Ha a h1-component összetevő styleClassName stílusosztályát adja hozzá, amikor az összetevőjét áthúzza az oldalra, az alapértelmezett stílus a h1-component-default-style lesz. Az appinfo.json új tartalma a következő:

   {
      "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. Módosítsa úgy a render.js fájlt, hogy a 2. sornak (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {) a következő sorra cserélésével módosítsa a CSS-fájlt.

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

   Megjegyzés:

   Mivel módosította az appinfo.json fájlt, frissítenie kell a böngészőt, és újból hozzá kell adnia összetevőjét az oldalhoz a változtatások érvénybe lépéséhez.