Atualizar o Tema para Outros Escolherem o Estilo de Componente H1

Pode registar estilos para o seu componente com o tema, de modo a que outros utilizadores possam alternar entre os estilos fornecidos para o seu componente a partir do painel de definições ou do separador Estilo.

1. Acrescente mais estilos ao ficheiro design.css do seu componente. Coloque um prefixo em cada estilo com o styleClassName registado do componente, conforme definido no appinfo.json. Para este componente, esse prefixo é h1-component.

   Foram acrescentados mais dois estilos, h1-component-gothic-style e h1-component-courier-style.

   O novo conteúdo do design.css será agora o seguinte:

   .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. Registe os seus estilos no ficheiro design.json do tema. Pode encontrar este ficheiro no tema que o site está a utilizar. Defina o nível de detalhe inferior para os ficheiros do tema na pasta de designs e, em seguida, para a pasta de valores por omissão e acrescente uma secção para o seu componente ao design.json.

   O texto a negrito que se segue é um exemplo do que deve ser acrescentado:

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