Voit luoda esimääritetyn listan tyyleistä, joita käyttäjät voivat käyttää komponentissasi.
Komponentin esimääritetyn tyylilistan määritys tehdään samalla tavalla kuin Oracle Content Management -palvelun tarjoamien komponenttien tyyliluokkien määritys teeman suunnittelutiedostojen avulla. Räätälöidyt tyyliluokat nimetään komponentin appinfo.json
-tiedostossa.
Voit määrittää lisää tyylejä design.css
- ja design.json
-tiedostoissa. json
-tiedosto sisältää vastaavuusmäärityksen käyttöliittymässä näkyvän nimen ja varsinaisen perustana olevan css
-luokan välillä, ja css
-tiedosto sisältää kunkin tyyliluokan tiedot.
design.json
-tiedoston rakenne komponenteille on seuraava:
{ "componentStyles": { "scs-image": { "styles": [] }, "scs-map": { "styles": [] }, "scs-title": { "styles": [] }, "scs-paragraph": { "styles": [] }, "scs-txt": { "styles": [] }, "scs-divider": { "styles": [] }, "scs-button": { "styles": [] }, "scs-app": { "styles": [] }, "scs-spacer": { }, "scs-gallery": { "styles": [] }, "scs-youtube": { "styles": [] }, "scs-socialbar": { "styles": [] }, "scs-document": { "styles": [] } } }
Kukin "styles":[]
-merkintä voi sisältää listan tyyleistä kyseiselle komponentille. "name"
voi olla joko viittaus sisäänrakennettuun lokalisoituun merkkijonoon tai määritetty käytettävä arvo. Otsikko-komponentti esimerkiksi sisältää seuraavat oletustyylit:
{ "styles": [{ "name": "COMP_STYLE_FLAT", "class": "scs-title-default-style" }, { "name": "COMP_STYLE_HIGHLIGHT", "class": "scs-title-style-2" }, { "name": "COMP_STYLE_DIVIDER", "class": "scs-title-style-3" } ] }
name-arvoille on määritetty varsinaiset sanat, jotka näytetään käyttöliittymässä:
"COMP_STYLE_FLAT": "Flat", "COMP_STYLE_HIGHLIGHT": "Highlight", "COMP_STYLE_DIVIDER": "Divider",
css
-tiedosto sisältää luokan arvojen määritykset:
.scs-title-default-style { color: #333333; display: block; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 24px; font-weight: normal; }
Esimerkki: voit lisätä teeman design.json
-tiedostossa komponentille merkintöjä, jotka perustuvat components.json
-tiedostossa määrittämääsi initialData.componentId
-arvoon:
"componentId": "news-article"
Vastaavat design.json
-tiedoston merkinnät olisivat seuraavat:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
Vastaavat design.css
-tiedoston merkinnät olisivat seuraavat:
.news-article-default-style .scs-image {…} .news-article-style-1 .scs-image {…}