Theme aktualisieren, damit andere Benutzer den H1-Komponentenstil auswählen können

Sie können Stile für Ihre Komponente beim Theme registrieren, sodass andere Benutzer im Einstellungsbereich oder auf der Registerkarte Stil zwischen den Stilen wechseln können, die Sie für die Komponente bereitstellen.

1. Fügen Sie der Datei design.css der Komponente weitere Stile hinzu. Stellen Sie jedem Stil den registrierten styleClassName der Komponente, wie er in appinfo.json definiert ist, als Präfix voran. Bei dieser Komponente lautet dieses Präfix h1-component.

   Zwei weitere Stile (h1-component-gothic-style und h1-component-courier-style) wurden hinzugefügt.

   Der neue Inhalt von design.css lautet jetzt wie folgt:

   .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. Registrieren Sie die Stile in der Datei design.json des Themes. Sie finden diese Datei im Theme, das von der Site verwendet wird. Führen Sie einen Drilldown zu den Theme-Dateien im designs-Ordner durch und dann zum defaults-Ordner, und fügen Sie einen Abschnitt für Ihre Komponente zu design.json hinzu.

   Der folgende fettgedruckte Text dient als Beispiel für den hinzuzufügenden Inhalt:

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