Teeman päivitys, jotta muut voivat valita H1-komponentin tyylin

Voit rekisteröidä komponentin tyylejä teemaan, jotta muut käyttäjät voisivat vaihtaa komponentille määrittämiesi tyylien välillä Tyyli-välilehden asetuspaneelissa.

Teeman päivitys, jotta muut käyttäjät voisivat valita komponentin tyylin:
  1. Lisää tyylejä komponentin design.css-tiedostoon. Anna kunkin tyylin etuliitteeksi komponentin rekisteröity styleClassName-arvo, joka on määritetty appinfo.json-tiedostossa. Tämän komponentin etuliite on h1-component.

    Kaksi ylimääräistä tyyliä, h1-component-gothic-style ja h1-component-courier-style, on lisätty.

    design.css-tiedoston uusi sisältö on seuraava:

    .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. Rekisteröi tyylisi teeman design.json-tiedostossa. Tämä tiedosto sijaitsee teemassa, jota sivusto käyttää. Siirry alaspäin designs-kansiossa sijaitseviin teeman tiedostoihin. Siirry sitten defaults-kansioon ja lisää komponentille osa design.json-tiedostoon.

    Seuraava lihavoitu teksti on esimerkki siitä, mitä tiedostoon lisätään:

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

Lisätyn design.json-leikkeen nimet ("Plain", "Courier", "Gothic") näkyvät komponentin asetuspaneelin tyylivälilehdessä alla näytetyllä tavalla. Kun jokin nimi valitaan, vastaava tyyli ("h1-component-default-style", "h1-component-courier-style", "h1-component-gothic-style") otetaan käyttöön komponentissa.