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.

Para atualizar o tema para outros utilizadores escolherem o estilo de componente:
  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": [

Os nomes no fragmento de design.json que foi acrescentado ("Plain", "Courier", "Gothic") serão apresentados no painel de definições do seu componente, no separador de estilo, conforme mostrado abaixo. Quando selecionados, irão aplicar os estilos correspondentes ("h1-component-default-style", "h1-component-courier-style", "h1-component-gothic-style") respetivamente, no seu componente.