Opdatere temaet, så andre kan vælge komponenttypografien H1

Du kan registrere typografier for din komponent i temaet, så andre brugere kan skifte mellem de typografier, som du angiver for din komponent fra indstillingspanelet eller fanen Typografi.

1. Føj flere typografier til komponentfilen design.css. Brug komponentens registrerede styleClassName som præfiks for hver typografi som defineret i appinfo.json. For denne komponent er præfikset h1-component.

   Der er tilføjet yderligere to typografier, h1-component-gothic-style og h1-component-courier-style.

   Det nye indhold i design.css er nu 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 dine typografier i temaets design.json-fil. Du finder denne fil i det tema, som sitet bruger. Bor ned til temafilerne i designmappen, bor derefter ned til standardmappen, og føj en sektion for din komponent til design.json.

   Den efterfølgende tekst, som er formateret med fed, er et eksempel på det, der skal tilføjes:

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