Du kan oprette en defineret liste over typografier, som brugerne kan anvende på din komponent.
Oprettelse af en foruddefineret liste over typografier til din komponent følger den samme model, som når du definerer typografiklasser til komponenter i Oracle Content Management via et temas designfiler. Du navngiver dine tilpassede typografiklasser i komponentens appinfo.json-fil.
Du definerer yderligere typografier i filerne design.css og design.json. Filen json indeholder en mapping fra det navn, der vises i brugergrænsefladen, til det faktiske underliggende css-klassenavn, og filen css indeholder detaljerne om hver typografiklasse.
Filen design.json har følgende struktur for komponenter:
{
"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": []
}
}
}
Hver af "styles":[]-posterne kan indeholde en liste over typografier til denne konkrete komponent. "name" kan enten være en reference til en indbygget lokaliseret streng eller en angivet værdi, der skal bruges. For eksempel omfatter komponenten Titel disse standardtypografier:
{
"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"
}
]
}
Navneværdierne mappes til de faktiske ord, der skal vises i brugergrænsefladen, som i dette eksempel:
"COMP_STYLE_FLAT": "Flat",
"COMP_STYLE_HIGHLIGHT": "Highlight",
"COMP_STYLE_DIVIDER": "Divider",
css-filen indeholder definitionerne for klasseværdierne.
.scs-title-default-style {
color: #333333;
display: block;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: normal;
}
Som et eksempel kan du i temaets design.json-fil tilføje poster til din komponent på basis af den initialData.compomentId-værdi, som du definerer i filen components.json:
"componentId": "news-article"
De tilsvarende poster i filen design.json er disse:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
De tilsvarende poster i filen design.css er disse:
.news-article-default-style .scs-image {…}
.news-article-style-1 .scs-image {…}