Można dodać arkusz CSS określający styl domyślny składnika.
assets
składnika plik design.css
z następującą zawartością:
.h1-component-default-style .scs-component-content { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; color:red; font-weight: normal; }
appinfo.json
deklarowany prefiks klasy stylu, która będzie używana dla składnika. Jeśli zostanie dodana właściwość styleClassName
składnika h1-component
, to — gdy składnik zostanie przeciągnięty na stronę — stylem domyślnym będzie h1-component-default-style
. Nowa zawartość pliku appinfo.json
przedstawia się następująco:
{ "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": [ ] } }
render.js
, tak aby ładował plik CSS; w tym celu należy zastąpić linię 2 (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {
) następującą linią:
define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) {
Uwaga:
Ponieważ plikappinfo.json
został zmieniony, trzeba odświeżyć zawartość wyświetlaną w przeglądarce, po czym — aby wychwycić zmianę — ponownie dodać składnik do strony.Sprawdzić, czy składnik pobiera teraz swoje dane domyślne z pliku appinfo.json
.