Os ícones de componentes permitem que os autores identifiquem rapidamente um componente com ícones ou abreviações significativas. Agora os autores podem encontrar 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:
Por padrão, os 2 primeiros caracteres do título do componente ([cq:Component]@jcr:title) são usados como a 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 qualquer perturbação visual.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- abbreviation = "AL"
Os ícones 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 do atributo de ícone HTML do ícone CoralUI desejado (enumerado na documentação CoralUI.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- cq:icon = "documentFragment"
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 sob o [cq:Component].
O PNG deve ter um plano de fundo transparente ou uma cor de plano de fundo definida como #707070.
As imagens PNG serão dimensionadas para 20px por 20px. No entanto, para acomodar exibições de retina 40px de 40px podem ser preferíveis.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.png
- jcr:primaryType = "nt:file"
Imagens SVG (com base em vetor) podem ser usadas para ícones de componentes. Para configurar uma imagem SVG como um ícone de componente, adicione o SVG desejado como um nt:file chamado cq:icon.svg sob o [cq:Component].
As imagens SVG devem ter uma cor 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"