Anpassen von Komponentensymbolen

Mithilfe von Komponentensymbolen können Autorinnen und Autoren eine Komponente anhand von Symbolen oder aussagekräftigen Abkürzungen schnell erkennen. Autorinnen und Autoren können jetzt die zum Erstellen ihrer Web-Erlebnisse erforderlichen Komponenten schneller als je zuvor finden.

Der Komponenten-Browser wird jetzt in einem konsistenten grauen Design mit folgenden Elementen angezeigt:

• Komponentengruppe
• Komponententitel
• Komponentenbeschreibung
• Komponentensymbol
  • die ersten beiden Buchstaben des Komponententitels (Standard)
  • benutzerdefiniertes PNG-Bild (von einer Entwicklerin oder einem Entwickler konfiguriert)
  • benutzerdefiniertes SVG-Bild (von einer Entwicklerin oder einem Entwickler konfiguriert)
  • CoralUI-Symbol (von einer Entwicklerin oder einem Entwickler konfiguriert)

Konfigurationsoptionen für Komponentensymbole

Abkürzungen

Standardmäßig werden die ersten beiden Zeichen des Komponententitels ([cq:Component]@jcr:title) als Abkürzung verwendet. Beispielsweise würde [cq:Component]@jcr:title=Artikelliste zu der Abkürzung „Ar“ führen.

Die Abkürzung kann über die Eigenschaft [cq:Component]@abbreviation angepasst werden. Dieser Wert kann zwar mehr als 2 Zeichen enthalten. Es wird jedoch empfohlen, die Abkürzung auf 2 Zeichen zu beschränken, um optische Beeinträchtigungen zu vermeiden.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

CoralUI-Symbole

Von AEM bereitgestellte CoralUI-Symbole können als Komponentensymbole verwendet werden. Um ein CoralUI-Symbol zu konfigurieren, setzen Sie die Eigenschaft [cq:Component]@cq:icon auf den HTML-Symbol-Attributwert des gewünschten CoralUI-Symbols (aufgelistet in der CoralUI-Dokumentation).

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

PNG-Bilder

PNG-Bilder können als Komponentensymbole verwendet werden. Um ein PNG-Bild als Komponentensymbol zu konfigurieren, fügen Sie das gewünschte Bild als nt:file namens cq:icon.png unter [cq:Component] hinzu.

Das PNG-Bild sollte einen transparenten Hintergrund aufweisen oder #707070 als Hintergrundfarbe festgelegt haben.

Die PNG-Bilder werden auf 20 x 20 px skaliert. Für Retina-Displays kann jedoch ein Wert von 40 x 40 px **** vorzuziehen sein.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.png
     - jcr:primaryType = "nt:file"

SVG-Bilder

(Vektorbasierte) SVG-Bilder können als Komponentensymbole verwendet werden. Um ein SVG-Bild als Komponentensymbol zu konfigurieren, fügen Sie die gewünschte SVG als nt:file namens cq:icon.svg unter [cq:Component] hinzu.

SVG-Bilder sollten #707070 als Hintergrundfarbe haben und 20 x 20 px groß sein.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.svg
     - jcr:primaryType = "nt:file"

Zusätzliche Ressourcen

• Verfügbare CoralUI-Symbole