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:
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"
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"
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"
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"