Anpassen von Komponentensymbolen developing-component-icons-in-aem-sites
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 component-icon-configuration-options
Abkürzungen abbreviations
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 coralui-icons
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-images
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 svg-images
(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"