自定義元件表徵圖

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

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

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

元件表徵圖配置選項

縮寫

依預設，元件標題的前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"

CoralUI圖示

AEM提供的CoralUI圖示可用於元件圖示。 若要設定CoralUI圖示，請將​[cq:Component]@cq:icon​屬性設為所需CoralUI圖示的HTML圖示屬性值(列舉於CoralUI檔案中。

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

PNG影像

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影像（基於向量）可用於元件表徵圖。 要將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"

其他資源

本頁內容