Personalização de ícones de componentes developing-component-icons-in-aem-sites
Os Ícones de componente permitem que os autores identifiquem rapidamente um componente com ícones ou abreviações relevantes. Os autores agora podem localizar os Componentes necessários para criar suas experiências da Web mais rápido do que nunca.
O navegador de componentes agora é exibido em um tema cinza consistente, exibindo o:
-
Grupo de componentes
-
Título do componente
-
Descrição do componente
-
Ícone do componente
- As duas primeiras letras do Título de Componente (padrão)
- Imagem PNG personalizada (configurada por um desenvolvedor)
- Imagem SVG personalizada (configurada por um desenvolvedor)
- Ícone CoralUI (configurado por um desenvolvedor)
Opções de configuração do ícone do componente component-icon-configuration-options
Abreviações abbreviations
Por padrão, os dois primeiros caracteres do título do componente ([cq:Component]@jcr:title) são usados como abreviação. Por exemplo, se [cq:Component]@jcr:title=Article List, a abreviação seria exibida como "Ar".
A abreviação pode ser personalizada por meio da propriedade [cq:Component]@abbreviation. Embora esse valor possa aceitar mais de 2 caracteres, é recomendável limitar a abreviação a 2 caracteres para evitar perturbações visuais.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- abbreviation = "AL"
Ícones do CoralUI coralui-icons
Os ícones do CoralUI, fornecidos pelo AEM, podem ser usados para ícones de componentes. Para configurar um ícone CoralUI, defina uma propriedade [cq:Component]@cq:icon para o valor de atributo de ícone HTML do ícone CoralUI desejado (enumerado na documentação do CoralUI.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- cq:icon = "documentFragment"
Imagens PNG png-images
Imagens PNG podem ser usadas para ícones de componentes. Para configurar uma imagem PNG como um ícone de componente, adicione a imagem desejada como um nt:file chamado cq:icon.png em [cq:Component].
O PNG deve ter um plano de fundo transparente ou uma cor de plano de fundo definida como #707070.
As imagens PNG foram dimensionadas para 20px por 20px. No entanto, para acomodar exibições de retina 40px por 40px pode ser preferível.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.png
- jcr:primaryType = "nt:file"
Imagens do SVG svg-images
As imagens do SVG (baseadas em vetor) podem ser usadas para ícones de componentes. Para configurar uma imagem do SVG como um ícone de componente, adicione o SVG desejado como um nt:file chamado cq:icon.svg no [cq:Component].
As imagens do SVG devem ter uma cor de plano de fundo definida como #707070 e um tamanho de 20px por 20px.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"