DocumentazioneAEMTutorial su AEMTutorial su AEM Sites

Personalizzazione delle icone dei componenti

5 maggio 2025
  • Si applica a:
  • Experience Manager 6.4
  • Experience Manager 6.5
  • Argomenti:

Creato per:

  • Intermedio
  • Utente

Le icone dei componenti consentono agli autori di identificare rapidamente un componente con icone o abbreviazioni significative. Gli autori possono ora individuare i componenti necessari per creare le proprie esperienze web in modo più rapido che mai.

video poster

https://video.tv.adobe.com/v/41681?quality=12&learn=on&captions=ita

Il browser Componenti ora visualizza in un tema grigio coerente, con i seguenti elementi:

  • Gruppo di componenti

  • Titolo componente

  • Descrizione componente

  • Icona componente

    • Le prime due lettere del titolo del componente (impostazione predefinita)
    • Immagine PNG personalizzata (configurata da uno sviluppatore)
    • Immagine SVG personalizzata (configurata da uno sviluppatore)
    • Icona CoralUI (configurata da uno sviluppatore)

Opzioni di configurazione per l’icona del componente

Abbreviazioni

Per impostazione predefinita, i primi 2 caratteri del titolo del componente ([cq:Component]@jcr:title) vengono utilizzati come abbreviazione. Ad esempio, se [cq:Component]@jcr:title=Article List l'abbreviazione verrà visualizzata come "Ar".

L'abbreviazione può essere personalizzata tramite la proprietà [cq:Component]@abbreviation. Anche se questo valore può accettare più di 2 caratteri, si consiglia di limitare l’abbreviazione a 2 caratteri per evitare disturbi visivi.

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

Icone di CoralUI

Le icone di CoralUI fornite da AEM possono essere utilizzate per le icone dei componenti. Per configurare un'icona di CoralUI, impostare una proprietà [cq:Component]@cq:icon sul valore dell'attributo dell'icona di CoralUI HTML desiderato (enumerato nella documentazione di CoralUI.

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

Immagini PNG

Le immagini PNG possono essere utilizzate per le icone dei componenti. Per configurare un'immagine PNG come icona del componente, aggiungere l'immagine desiderata come nt:file denominata cq:icon.png in [cq:Component].

Il file PNG deve avere uno sfondo trasparente o un colore di sfondo impostato su #707070.

Le immagini PNG vengono ridimensionate a 20px di 20px. Tuttavia, per adattarsi alle visualizzazioni retina 40px di 40px potrebbe essere preferibile.

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

Immagini SVG

Le immagini SVG (basate su vettori) possono essere utilizzate per le icone dei componenti. Per configurare un'immagine SVG come icona di un componente, aggiungere il SVG desiderato come nt:file denominato cq:icon.svg in [cq:Component].

Le immagini SVG devono avere un colore di sfondo impostato su #707070 e una dimensione di 20px per 20px.

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

Risorse aggiuntive

  • Icone CoralUI disponibili
recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d