Voit lisätä CSS-tiedoston, joka tarjoaa oletustyylin komponentille.
assets
-kansioon design.css
-tiedosto, jonka sisältö on seuraava:
.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
-tiedostoon komponentin tyylissä käytettävän tyyliluokan etuliitteen esittely. Jos h1-component
-komponentille lisätään styleClassName
-nimi, oletustyyli on h1-component-default-style
, kun komponentti pudotetaan sivulle. appinfo.json
-tiedoston uusi sisältö on seuraava:
{ "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
-tiedostoa siten, että se lataa CSS-tiedoston. Voit tehdä tämän korvaamalla rivin 2 (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {
) seuraavalla rivillä.
define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) {
Huomautus::
Koska muutitappinfo.json
-tiedostoa, sinun on päivitettävä selain ja lisättävä komponentti sivulle uudelleen, jotta muutokset otettaisiin käyttöön.Varmista, että komponentti hakee oletustietonsa appinfo.json
-tiedostosta.