Het thema bijwerken zodat anderen de H1-componentstijl kunnen selecteren

U kunt stijlen registreren voor uw component met het thema, zodat andere gebruikers kunnen schakelen tussen de stijlen die u biedt voor uw component via het paneel 'Instellingen' of het tabblad Stijl.

1. Voeg meer stijlen toe aan bestand design.css van uw component. Laat elke stijl voorafgaan door de geregistreerde styleClassName van de component zoals deze is gedefinieerd in appinfo.json. Voor deze component is dit prefix h1-component.

   Er zijn nog twee stijlen toegevoegd: h1-component-gothic-style en h1-component-courier-style.

   De nieuwe inhoud van design.css is nu als volgt:

   .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. Registreer uw stijlen in het bestand design.json van het thema. U kunt dit bestand vinden in het thema dat voor de site wordt gebruikt. Drill omlaag naar de themabestanden in de map met ontwerpen, vervolgens naar de map met standaardwaarden en voeg een sectie voor uw component toe aan design.json.

   De vette tekst die volgt is een voorbeeld van wat u kunt toevoegen:

              "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": [