元件圖示可讓作者快速識別包含圖示或有意義縮寫的元件。 作者現在可以比以往更快找到建立其網頁體驗所需的元件。
元件瀏覽器現在會以一致的灰色主題顯示,並顯示:
依預設,元件標題的前2個字元([cq:Component]@jcr:title)會作為縮寫。 例如,如果[cq:Component]@jcr:title=Article List,縮寫將顯示為"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影像設定為元件圖示,請在[cq:Component]下方,將所需影像新增為nt:file,名為cq:icon.png。
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影像配置為元件表徵圖,請在[cq:Component]下將所需的SVG添加為nt:file,該cq:icon.svg。
SVG影像的背景顏色應設定為#707070,大小應為20px x 20px。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"