Classes de Estilo para Componentes

Você pode criar uma lista definida de estilos que possam ser aplicados a seu componente pelos usuários.

Ter uma lista predefinida de estilos para seu componente equivale a definir classes de estilo para os componentes fornecidos pelo Oracle Content Management por meio de arquivos de design de um tema. Você dá nomes a suas classes de estilo personalizadas no arquivo appinfo.json do componente.

Defina estilos adicionais nos arquivos design.css e design.json. O arquivo json fornece um mapeamento do nome que aparecerá na interface do usuário para o nome da classe css subjacente real e o arquivo css fornece os detalhes de cada classe de estilo.

O arquivo design.json tem a seguinte estrutura para 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 entrada "styles":[] pode conter uma lista de estilos para esse componente específico. A entrada "name" pode ser uma referência a uma string interna localizada ou a um valor especificado para uso. Por exemplo, o componente Título fornece estes estilos padrã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"
               }
]
}

Os valores de nomes são mapeados para as palavras reais a serem exibidas na interface do usuário, com esta:

    "COMP_STYLE_FLAT": "Flat",
    "COMP_STYLE_HIGHLIGHT": "Highlight",
    "COMP_STYLE_DIVIDER": "Divider",

O arquivo css fornece as definições dos valores das classes:

    .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 arquivo design.json do tema, você pode adicionar entradas para seu componente com base no valor initialData.compomentId que você define no arquivo components.json:

"componentId": "news-article"

As entradas correspondentes no arquivo design.json seriam 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 arquivo design.css seriam estas:

.news-article-default-style .scs-image {…}
.news-article-style-1 .scs-image {…}