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) viene utilizzata come abbreviazione. Ad esempio, se [cq:Component]@jcr:title=Elenco articoli l'abbreviazione viene visualizzata come "Air".
L'abbreviazione può essere personalizzata tramite [cq:Component]Abbreviazione @ 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 CoralUI, fornite da AEM, possono essere utilizzate per le icone dei componenti. Per configurare un'icona CoralUI, imposta un [cq:Component]@cq:icon al valore dell'attributo dell'icona HTML dell'icona CoralUI desiderata (enumerato nel 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 di un componente, aggiungi l’immagine desiderata come nt:file denominato cq:icon.png in [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 x 20 px. Tuttavia, per soddisfare le esigenze dei display Retina 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 di SVG come icona di un componente, aggiungi 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 le dimensioni 20px per 20px.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"