Personalizar ícones de componentes

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:

  • Grupo de componentes
  • Título do componente
  • Descrição do componente
  • Ícone do componente
    • As duas primeiras letras do Título do 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 de componente

Abreviações

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"

Ícones de CoralUI

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

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

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"

Recursos adicionais

Nesta página