Mithilfe von Komponentensymbolen können Autoren eine Komponente schnell mit Symbolen oder aussagekräftigen Abkürzungen identifizieren. Autoren können jetzt die Komponenten finden, die erforderlich sind, um ihre Web-Erlebnisse schneller als je zuvor zu erstellen.
Der Komponenten-Browser wird jetzt in einem konsistenten grauen Design angezeigt, in dem Folgendes angezeigt wird:
Standardmäßig sind die ersten 2 Zeichen des Komponententitels ([cq:Component]@jcr:title) werden als Abkürzung verwendet. Wenn beispielsweise [cq:Component]@jcr:title=Artikelliste Die Abkürzung würde als "Ar".
Die Abkürzung kann über die [cq:Component]@abkürzung -Eigenschaft. Dieser Wert kann zwar mehr als 2 Zeichen enthalten, es wird jedoch empfohlen, die Abkürzung auf 2 Zeichen zu beschränken, um visuelle Störungen zu vermeiden.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- abbreviation = "AL"
CoralUI-Symbole, die von AEM bereitgestellt werden, können für Komponenten-Symbole verwendet werden. Um ein CoralUI-Symbol zu konfigurieren, legen Sie eine [cq:Component]@cq:icon -Eigenschaft auf den Attributwert des gewünschten CoralUI-Symbols HTML (aufgezählt in der CoralUI-Dokumentation.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- cq:icon = "documentFragment"
PNG-Bilder können für Komponentensymbole verwendet werden. Um ein PNG-Bild als Komponentensymbol zu konfigurieren, fügen Sie das gewünschte Bild als nt:file benannt cq:icon.png unter [cq:Component].
Das PNG sollte einen transparenten Hintergrund oder eine Hintergrundfarbe haben, die auf #707070.
Die PNG-Bilder werden auf 20 px mal 20 px. Retina-Displays können jedoch angepasst werden 40 px von 40 px möglicherweise vorzuziehen.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.png
- jcr:primaryType = "nt:file"
SVG-Bilder (vektorbasiert) können für Komponentensymbole verwendet werden. Um ein SVG-Bild als Komponentensymbol zu konfigurieren, fügen Sie die gewünschte SVG als nt:file benannt cq:icon.svg unter [cq:Component].
SVG-Bilder sollten eine Hintergrundfarbe haben, die auf #707070 und eine Größe von 20px mal 20px.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"