Personalizzazione delle icone dei componenti

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.

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

  • Gruppo componente
  • Titolo componente
  • Descrizione componente
  • Icona componente
    • Le prime due lettere del titolo del componente (impostazione predefinita)
    • Immagine PNG personalizzata (configurato da uno sviluppatore)
    • Immagine SVG personalizzata (configurato da uno sviluppatore)
    • Icona CoralUI (configurato 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:titolo) vengono utilizzati come abbreviazione. Ad esempio, se [cq:Component]@jcr:title=Elenco articoli l’abbreviazione viene visualizzata come "Ar".

L’abbreviazione può essere personalizzata tramite il [cq:Component]@abbreviation proprietà. 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 dall’AEM possono essere utilizzate per le icone dei componenti. Per configurare un'icona di CoralUI, imposta un [cq:Component]@cq:icona all'icona HTML dell'icona CoralUI desiderata (enumerata 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, aggiungi l’immagine desiderata come icona nt:file denominato cq:icon.png sotto [cq:Component].

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

Le immagini PNG vengono ridimensionate in 20 px per 20 px. Tuttavia, per adattarsi a display retinici 40 px da 40 px 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, aggiungi il SVG desiderato come icona nt:file denominato cq:icon.svg sotto [cq:Component].

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

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

Risorse aggiuntive

In questa pagina