Přidání šablon stylů CSS pro komponentu

Můžete přidat šablony stylů CSS, který poskytnou výchozí styl pro komponentu.

Postup přidání šablon stylů CSS:
  1. Přidejte soubor design.css s následujícím obsahem do složky assets příslušné komponenty:
    .h1-component-default-style .scs-component-content {
     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
     font-size: 24px;
     color:red;
     font-weight: normal; }
  2. Pokud chcete deklarovat předponu třídy stylu, která bude použita k nastavení stylu komponenty, doplňte náležitě soubor appinfo.json. Pokud přidáte styleClassName pro h1-component, bude výchozím stylem pro komponentu umístěnou na tuto stánku styl h1-component-default-style. Soubor appinfo.json bude mít následující nový obsah:
    {
       "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. Aktualizujte soubor render.js tak, aby načetl váš soubor šablon stylů CSS, nahrazením řádku 2 (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {) následujícím řádkem.
    define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) { 

    Poznámka:

    Vzhledem k tomu, že jste změnili soubor appinfo.json, musíte aktualizovat prohlížeč a znovu přidat komponentu na stránku, aby se změny projevily.

Ověřte, že vaše komponenta si nyní vyzvedne výchozí data ze souboru appinfo.json.