コンポーネントアイコンを使用すると、オーサーはアイコンや意味のある略語でコンポーネントをすばやく識別できます。オーサーは、web エクスペリエンスを構築するのに必要なコンポーネントを、以前よりも迅速に見つけることができるようになりました。
コンポーネントブラウザーが一貫したグレーのテーマで表示され、次の項目が表示されるようになりました。
デフォルトでは、コンポーネントタイトルの最初の 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:icon.png という名前の nt:file として [cq:Component] に追加します。
PNG の背景は透明にするか、背景色を #707070 に設定する必要があります。
PNG 画像は、20ピクセル x 20ピクセルにサイズが調整されます。ただし、Retina ディスプレイに対応するには、40ピクセル x 40ピクセルが望ましい場合があります。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.png
- jcr:primaryType = "nt:file"
SVG 画像(ベクトルベース)は、コンポーネントアイコンに使用できます。SVG 画像をコンポーネントアイコンとして設定するには、目的の SVG を nt:file という名前の cq:icon.svg として [cq:Component] に追加します。
SVG 画像の背景色は #707070 に設定し、サイズは 20ピクセル x 20ピクセルにする必要があります。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"