Pode criar uma lista definida de estilos que podem ser aplicados ao seu componente pelos utilizadores.
Ter uma lista predefinida de estilos para o seu componente segue o mesmo modelo da definição de classes de estilo para os componentes fornecidos pelo Oracle Content Management através dos ficheiros de design de um tema. Deve nomear as suas classes de estilo customizadas no ficheiro appinfo.json do componente.
Deve definir os estilos adicionais nos ficheiros design.css e design.json. O ficheiro json fornece uma correspondência do nome que irá aparecer na interface do utilizador com o nome da classe css subjacente real e o ficheiro css fornece os detalhes para cada classe de estilo.
O ficheiro design.json tem a seguinte estrutura para os componentes:
{
"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": []
}
}
}
Cada uma das entradas "styles":[] pode conter uma lista de estilos para esse componente em particular. O "name" pode ser uma referência a uma cadeia de caracteres localizada integrada ou um valor especificado a utilizar. Por exemplo, o componente Title fornece estes estilos por omissão:
{
"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"
}
]
}
É efetuada a correspondência dos valores name com as palavras reais a apresentar na interface do utilizador, tal como:
"COMP_STYLE_FLAT": "Flat",
"COMP_STYLE_HIGHLIGHT": "Highlight",
"COMP_STYLE_DIVIDER": "Divider",
O ficheiro css fornece as definições para os valores da classe:
.scs-title-default-style {
color: #333333;
display: block;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 24px;
font-weight: normal;
}
Como exemplo, no ficheiro design.json do tema, pode acrescentar entradas para o seu componente com base no valor initialData.compomentId que definir no ficheiro components.json:
"componentId": "news-article"
As entradas correspondentes no ficheiro design.json serão estas:
"componentStyles": {
"news-article": {
"styles": [{
"name": "News Article 1",
"class": "news-article-default-style"
},
{
"name": "News Article 2",
"class": "news-article-style-1"
}]
},
As entradas correspondentes no ficheiro design.css serão estas:
.news-article-default-style .scs-image {…}
.news-article-style-1 .scs-image {…}