Personalizzazione delle icone dei componenti developing-component-icons-in-aem-sites
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 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 component-icon-configuration-options
Abbreviazioni abbreviations
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 coralui-icons
Le icone di CoralUI fornite dall’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 HTML dell'icona di CoralUI desiderata (enumerato nella documentazione di CoralUI.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- cq:icon = "documentFragment"
Immagini PNG png-images
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 svg-images
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"