元件圖示可讓作者使用圖示或有意義的縮寫來快速識別元件。 作者現在可以找到所需元件,以前所未有的速度建置其網頁體驗。
元件瀏覽器現在會以一致的灰色主題顯示,並顯示:
依預設,元件標題的前2個字元([cq:Component]@jcr:title)當作縮寫。 例如,如果 [cq:Component]@jcr:title=文章清單 縮寫會顯示為「Ar「。
縮寫可透過以下方式自訂: [cq:Component]@abbreviation 屬性。 雖然此值可接受超過2個字元,但建議將縮寫限製為2個字元,以避免任何視覺干擾。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- abbreviation = "AL"
AEM提供的CoralUI圖示可用於元件圖示。 若要設定CoralUI圖示,請設定 [cq:Component]@cq:icon 屬性至所需的CoralUI圖示的HTML圖示屬性值(列舉於 CoralUI檔案.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- cq:icon = "documentFragment"
PNG影像可用於元件圖示。 若要將PNG影像設定為元件圖示,請將所需影像新增為 nt:file 已命名 cq:icon.png 在 [cq:Component].
PNG應具有透明背景,或將背景顏色設定為 #707070.
PNG影像會縮放至 20px x 20px. 但為了配合視網膜顯示 40px 作者: 40px 可能比較好。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.png
- jcr:primaryType = "nt:file"
SVG影像(向量型)可用於元件圖示。 若要將SVG影像設定為元件圖示,請將所需SVG新增為 nt:file 已命名 cq:icon.svg 在 [cq:Component].
SVG影像的背景顏色應設為 #707070 並且大小為 20px x 20px。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"