Personalizzazione delle icone dei componenti
- Si applica a:
- Experience Manager 6.4
- Experience Manager 6.5
Creato per:
- Intermedio
- Utente
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
Abbreviazioni
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
Le icone di CoralUI fornite da 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 di CoralUI HTML desiderato (enumerato nella documentazione di 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 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
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"