Aktualizace tématu pro ostatní za účelem výběru stylu komponenty H1

Styly pro svou komponentu můžete registrovat pomocí tématu, aby ostatní uživatelé mohli přepínat mezi styly, které pro komponentu poskytnete, na panelu nastavení nebo na kartě Styl.

1. Přidejte do svého souboru komponenty design.css několik dalších stylů. Každému stylu s registrovaným názvem styleClassName komponenty přidejte předponu podle definice v souboru appinfo.json. Pro tuto komponentu je předpona h1-component.

   Byly přidány další dva styly, h1-component-gothic-style a h1-component-courier-style.

   Soubor design.css bude mít nyní následující obsah:

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }
   .h1-component-gothic-style .scs-component-content {
    font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
    font-size: 32px;
    font-weight: bold; }
   .h1-component-courier-style .scs-component-content {
    font-family: "Courier";
    font-size: 32px;
    font-weight: bold; }

2. Registrujte své styly do souboru design.json tématu. Tento soubor najdete v tématu, které web používá. Přejděte na soubory témat ve složce designs, poté přejděte do složky defaults a přidejte sekci pro komponentu do souboru design.json.

   V následujícím textu je tučným písmem zvýrazněn příklad toho, co můžete přidat:

              "news-article": {
                       "styles": [{
                                         "name": "News Article 1",
                                         "class": "news-article-default-style"
                                         },
                       {
                                         "name": "News Article 2",
                                         "class": "news-article-style-1"
                                         }
                                  ]
              }, 
              "h1-component": { 
       "styles": [{ 
         "name": "Plain", 
         "class": "h1-component-default-style" 
      }, { 
               "name": "Courier", 
               "class": "h1-component-courier-style" 
      }, { "name": "Gothic", 
           "class": "h1-component-gothic-style" 
      }] 
     }
     },
     "componentIcons": {
             "scs-socialbar": {
                       "icons": [