Personalización de iconos de componente developing-component-icons-in-aem-sites
Los iconos de componente permiten a los autores identificar rápidamente un componente con iconos o abreviaturas 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, que muestra lo siguiente:
-
Grupo de componentes
-
Título del componente
-
Descripción del componente
-
Icono de componente
- Las dos primeras letras del título del componente (predeterminado)
- Imagen PNG personalizada (configurado por un desarrollador)
- Imagen de SVG personalizada (configurado por un desarrollador)
- Icono de CoralUI (configurado por un desarrollador)
Opciones de configuración del icono de componente component-icon-configuration-options
Abreviaciones abbreviations
De forma predeterminada, los dos primeros caracteres del título del componente ([cq:Component]@jcr:título) se utilizan como abreviatura. Por ejemplo, si [cq:Component]@jcr:title=Lista de artículos la abreviatura se mostraría como "Ar".
La abreviatura se puede personalizar mediante la variable [cq:Component]@abbreviation propiedad. Aunque este valor puede aceptar más de 2 caracteres, se recomienda limitar la abreviatura a 2 caracteres para evitar cualquier perturbación visual.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- abbreviation = "AL"
Iconos de CoralUI coralui-icons
AEM Los iconos de CoralUI, proporcionados por el usuario de la interfaz de usuario de, se pueden utilizar para iconos de componente. Para configurar un icono de CoralUI, establezca un [cq:Component]@cq:icono HTML al valor de atributo icon 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 png-images
Las imágenes PNG se pueden utilizar para los iconos de componente. Para configurar una imagen PNG como icono de componente, añada la imagen deseada como nt:archivo nombrado cq:icon.png en el [cq:Component].
El PNG debe tener un fondo transparente o un color de fondo establecido como #707070.
Las imágenes PNG se escalan a 20 px por 20 px. Sin embargo, para acomodar las pantallas de retina 40 px por 40 px podría ser preferible.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.png
- jcr:primaryType = "nt:file"
Imágenes de SVG svg-images
Las imágenes de SVG (basadas en vectores) se pueden utilizar para los iconos de componente. Para configurar una imagen de SVG como icono de componente, añada el SVG deseado como nt:archivo nombrado cq:icon.svg en el [cq:Component].
Las imágenes de SVG deben tener un color de fondo establecido en #707070 y un tamaño de 20 px por 20 px.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"