Mise à jour du thème pour permettre aux autres utilisateurs de sélectionner le style de composant H1

Vous pouvez inscrire des styles pour votre composant auprès du thème afin que les autres utilisateurs puissent choisir un style parmi ceux que vous avez fournis pour votre composant à partir du panneau des paramètres ou de l'onglet Style.

1. Ajoutez des styles au fichier design.css de votre composant. Ajoutez l'élément inscrit styleClassName du composant tel que défini dans appinfo.json en tant que préfixe à chaque style. Pour ce composant, ce préfixe est le suivant : h1-component.

   Deux styles, h1-component-gothic-style et h1-component-courier-style ont été ajoutés.

   Le nouveau contenu de design.css sera le suivant :

   .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. Inscrivez les styles dans le fichier design.json du thème. Vous trouverez ce fichier dans le thème utilisé par le site. Explorez vers les fichiers du thème dans le dossier des conceptions, puis vers le dossier des valeurs par défaut, et ajoutez une section à design.json pour votre composant.

   Le texte en gras ci-dessous est un exemple de section à ajouter :

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