コンポーネントアイコンのカスタマイズ

コンポーネントアイコンを使用すると、作成者はアイコンや意味のある略語でコンポーネントをすばやく識別できます。 作成者は、Web エクスペリエンスを構築するのに必要なコンポーネントを、以前よりも迅速に見つけることができるようになりました。

コンポーネントブラウザーが一貫したグレーのテーマで表示され、次の項目が表示されるようになりました。

  • コンポーネントグループ
  • コンポーネントのタイトル
  • コンポーネント説明
  • コンポーネントアイコン
    • コンポーネントタイトルの最初の 2 文字 （デフォルト）
    • カスタム PNG 画像 （開発者が設定）
    • カスタムSVG画像 （開発者が設定）
    • CoralUI アイコン （開発者が設定）

コンポーネントアイコンの設定オプション

略語

デフォルトでは、コンポーネントタイトルの最初の 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"

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 画像をコンポーネントアイコンとして設定するには、目的の画像を nt:file 名前付き cq:icon.png の下に [cq:Component].

PNG は透明の背景にするか、背景色をに設定する必要があります。 #707070.

PNG 画像は、 20px by 20px. ただし、Retina ディスプレイに対応するため 40px 作成者 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:Component].

SVG画像の背景色は次のように設定する必要があります #707070 そして 20px x 20px.

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

その他のリソース

このページ