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 viene visualizzato in un tema grigio coerente e presenta i seguenti elementi:

• Gruppo componente
• Titolo componente
• Descrizione componente
• Icona componente
  • Le prime due lettere del titolo del componente (predefinito)
  • Immagine PNG personalizzata (configurata da uno sviluppatore)
  • Immagine SVG personalizzata (configurata da uno sviluppatore)
  • Icona CoralUI (configurata da uno sviluppatore)

Opzioni di configurazione dell’icona del componente

Abbreviazioni

Per impostazione predefinita, i primi 2 caratteri del titolo del componente ([cq:Component]@jcr:title) sono utilizzati come abbreviazione. Ad esempio, se [cq:Component]@jcr:title=Article List l’abbreviazione viene 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 dell’interfaccia utente Coral

Le icone CoralUI, fornite da AEM, possono essere utilizzate per le icone dei componenti. Per configurare un'icona CoralUI, imposta una proprietà [cq:Component]@cq:icon sul valore dell'attributo dell'icona HTML dell'icona CoralUI desiderata (enumerata nella documentazione 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 di un componente, aggiungi l'immagine desiderata come 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 verranno ridimensionate a 20px per 20px. È tuttavia preferibile utilizzare display Retina 40px di 40px.

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

Immagini SVG

Le immagini SVG (vettoriali) possono essere utilizzate per le icone dei componenti. Per configurare un'immagine SVG come icona di un componente, aggiungi l'SVG desiderato come 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 20px per 20px.

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

Risorse aggiuntive

• Icone CoralUI disponibili