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

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

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

  • コンポーネントグループ
  • コンポーネントのタイトル
  • コンポーネント説明
  • コンポーネントアイコン
    • コンポーネントタイトルの最初の2文字​（デフォルト）
    • カスタム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に合わせて20px​拡大/縮小されます。 ただし、Retinaディスプレイ​40px​を​40px​に収めるのが望ましい場合があります。

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

SVG画像

SVG画像（ベクトルベース）はコンポーネントアイコンに使用できます。 SVG画像をコンポーネントアイコンとして設定するには、[cq:Component]​の下に​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"

その他のリソース

このページ