Personalización de iconos de componente

Los iconos de componente permiten a los autores identificar rápidamente un componente con iconos o abreviaciones significativas. Los autores ahora pueden encontrar los componentes necesarios para crear sus experiencias web más rápido que nunca.

El navegador de componentes ahora se muestra en un tema gris coherente, mostrando lo siguiente:

  • Grupo de componentes
  • Título de componente
  • Descripción del componente
  • Icono de componente
    • Las dos primeras letras del Título del componente (predeterminado)
    • Imagen PNG personalizada (configurada por un desarrollador)
    • Imagen SVG personalizada (configurada por un desarrollador)
    • Icono de CoralUI (configurado por un desarrollador)

Opciones de configuración de iconos de componente

Abreviaturas

De forma predeterminada, los dos primeros caracteres del título del componente ([cq:Component]@jcr:title) se utilizan como abreviatura. Por ejemplo, si [cq:Component]@jcr:title=Article List la abreviatura se mostraría como "Ar".

La abreviación se puede personalizar mediante la propiedad [cq:Component]@abbreviation. Aunque este valor puede aceptar más de 2 caracteres, se recomienda limitar la abreviación a 2 caracteres para evitar cualquier perturbación visual.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

Iconos de CoralUI

Los iconos de CoralUI, proporcionados por AEM, se pueden utilizar para los iconos de los componentes. Para configurar un icono de CoralUI, establezca una propiedad [cq:Component]@cq:icon en el valor de atributo del icono HTML del icono de CoralUI deseado (enumerado en la documentación de CoralUI.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

Imágenes PNG

Las imágenes PNG se pueden utilizar para los iconos de componentes. Para configurar una imagen PNG como un icono de componente, añada la imagen deseada como nt:file con el nombre cq:icon.png en [cq:Component].

El PNG debe tener un fondo transparente o un color de fondo definido como #707070.

Las imágenes PNG se escalarán a 20px por 20px. Sin embargo, para dar cabida a las pantallas de retina 40px por 40px puede ser preferible.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.png
     - jcr:primaryType = "nt:file"

Imágenes SVG

Las imágenes SVG (basadas en vectores) se pueden utilizar para los iconos de los componentes. Para configurar una imagen SVG como un icono de componente, añada el SVG deseado como nt:file con el nombre cq:icon.svg en [cq:Component].

Las imágenes SVG deben tener un color de fondo establecido en #707070 y un tamaño de 20px por 20px.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.svg
     - jcr:primaryType = "nt:file"

Recursos adicionales

En esta página