自訂元件圖示

元件圖示可讓作者快速識別包含圖示或有意義縮寫的元件。 作者現在可以比以往更快找到建立其網頁體驗所需的元件。

元件瀏覽器現在會以一致的灰色主題顯示,並顯示:

  • 元件群組
  • 元件標題
  • 元件說明
  • 元件圖示
    • 元件標題的前兩個字母 (預設)
    • 自訂PNG影像 (由開發人員設定)
    • 自訂SVG影像 (由開發人員設定)
    • CoralUI圖示 (由開發人員設定)

元件圖示組態選項

縮寫

依預設,元件標題的前2個字元([cq:元件]@jcr:title)作為縮寫。 例如,若 [cq:元件]@jcr:title=文章清單 縮寫將顯示為「Ar」。

縮寫可透過 [cq:元件]@abbreviation 屬性。 雖然此值可以接受2個以上的字元,但建議將縮寫限制為2個字元,以避免任何視覺干擾。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

CoralUI圖示

AEM提供的CoralUI圖示可用於元件圖示。 若要設定CoralUI圖示,請設定 [cq:元件]@cq:表徵圖 屬性中,填入所需CoralUI圖示的HTML圖示屬性值(列舉於 CoralUI檔案.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

PNG影像

PNG影像可用於元件圖示。 若要將PNG影像設定為元件圖示,請將所需影像新增為 nt:file 已命名 cq:icon.png[cq:元件].

PNG應具有透明背景,或將背景顏色設定為 #707070.

PNG影像會縮放至 20px x 20px. 但是要容納視網膜顯示器 40px by 40px 可能更好。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.png
     - jcr:primaryType = "nt:file"

SVG影像

SVG影像(基於向量)可用於元件圖示。 若要將SVG影像設定為元件圖示,請將所需的SVG新增為 nt:file 已命名 cq:icon.svg[cq:元件].

SVG影像的背景顏色應設定為 #70707020px寬20px。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.svg
     - jcr:primaryType = "nt:file"

其他資源

本頁內容