Clases de estilo para componentes

Puede crear una lista definida de estilos que los usuarios pueden aplicar a su componente.

El uso de una lista predefinida de estilos para el componente sigue el mismo modelo que la definición de clases de estilo para componentes proporcionados por Oracle Content Management a través de los archivos de diseño de un tema. Puede asignar un nombre a las clases de estilo personalizadas en el archivo appinfo.json del componente.

Puede definir estilos adicionales en los archivos design.css y design.json. El archivo json proporciona una asignación del nombre que aparecerá en la interfaz de usuario al nombre de clase subyacente css actual, y el archivo css proporciona los detalles para cada clase de estilo.

El archivo design.json tiene la siguiente estructura para los 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 una de las entradas "styles":[] puede contener una lista de estilos de ese componente en particular. "name" puede ser una referencia a una cadena localizada incorporada o un valor especificado para su uso. Por ejemplo, el componente Title proporciona los siguientes estilos por defecto:

{    
    "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"
               }
]
}

Los valores de nombre se asignan a las palabras reales que se van a mostrar en la interfaz de usuario del modo siguiente:

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

El archivo css proporciona las definiciones de los valores de clase:

    .scs-title-default-style {
      color: #333333;
      display: block;
      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size: 24px;
      font-weight: normal;
                             }

Por ejemplo, en el archivo design.json del tema, puede agregar entradas para el componente según el valor initialData.compomentId que defina en el archivo components.json:

"componentId": "news-article"

Las entradas correspondientes en el archivo design.json serían las siguientes:

"componentStyles": {
        "news-article": {
                "styles": [{
                          "name": "News Article 1",
                          "class": "news-article-default-style"
                  },
                  {
                          "name": "News Article 2",
                          "class": "news-article-style-1"
                  }]
        },

Las entradas correspondientes en el archivo design.css serían las siguientes:

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