Oppdatere temaet slik at andre kan velge H1-komponentstilen

Du kan registrere stiler for en komponent med et tema, slik at andre brukere kan bytte mellom stilene du har angitt for komponenten din, fra ruten Innstillinger eller fanen Stil.

1. Legg til flere stiler i filen design.css for komponenten. Angi et prefiks for hver stil med styleClassName registrert for komponenten, slik det er definert i appinfo.json. For denne komponenten er dette prefikset h1-component.

   Ytterligere to stiler, h1-component-gothic-style og h1-component-courier-style er lagt til.

   Det nye innholdet i design.css blir nå følgende:

   .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. Registrer stilene i filen design.json for temaet. Du finner denne filen i temaet som brukes av området. Drill ned til temafilene i mappen for utforminger og deretter til standardmappen, og legg til en del for komponenten din i design.json.

   Teksten i fet skrift som følger, er et eksempel på hva du kan legge til:

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