Personalizzazione delle icone dei componenti

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:

  • Gruppo componente
  • Titolo componente
  • Descrizione componente
  • Icona componente
    • Le prime due lettere del titolo del componente (predefinito)
    • Immagine PNG personalizzata (configurato da uno sviluppatore)
    • Immagine SVG personalizzata (configurato da uno sviluppatore)
    • Icona CoralUI (configurato da uno sviluppatore)

Opzioni di configurazione dell’icona del componente

Abbreviazioni

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"

Icone dell’interfaccia utente Coral

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"

Immagini PNG

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

Immagini SVG

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"

Risorse aggiuntive

In questa pagina