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 werden die ersten beiden Zeichen des Komponententitels ([cq:Component]@jcr:title) als Abkürzung verwendet. Beispiel: Wenn [cq:Component]@jcr:title=Article List, würde die Abkürzung als "Ar"angezeigt werden.
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 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 HTML-Symbolattributwert des gewünschten CoralUI-Symbols fest (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 mit dem Namen cq:icon.png unter [cq:Component] hinzu.
Das PNG sollte einen transparenten Hintergrund haben oder eine Hintergrundfarbe, die auf #7070 festgelegt ist.
Die PNG-Bilder werden auf 20px um 20px skaliert. Um Retina-Anzeigen zu ermöglichen, ist es möglicherweise empfehlenswert, 40px von 40px anzuzeigen.
/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 mit dem Namen cq:icon.svg unter [cq:Component] hinzu.
SVG-Bilder sollten eine Hintergrundfarbe haben, die auf #7070 und eine Größe von 20px x x 20px eingestellt ist.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"