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