コンポーネントアイコンを使用すると、作成者はアイコンや意味のある略語でコンポーネントをすばやく識別できます。 作成者は、Web エクスペリエンスを構築するのに必要なコンポーネントを、以前よりも迅速に見つけることができるようになりました。
コンポーネントブラウザーが一貫したグレーのテーマで表示され、次の項目が表示されるようになりました。
デフォルトでは、コンポーネントタイトルの最初の 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"
AEMが提供する CoralUI アイコンは、コンポーネントアイコンに使用できます。 CoralUI アイコンを設定するには、 [cq:Component]@cq:icon プロパティを CoralUI アイコンのHTMLアイコン属性値に追加します ( CoralUI ドキュメント.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- cq:icon = "documentFragment"
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を 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"