구성 요소 아이콘 사용자 지정

구성 요소 아이콘을 사용하면 작성자가 아이콘이나 의미 있는 약자로 구성 요소를 빠르게 식별할 수 있습니다. 이제 작성자가 웹 경험을 보다 빠르게 작성하는 데 필요한 구성 요소를 찾을 수 있습니다.

이제 구성 요소 브라우저가 일관된 회색 테마에 표시되어 다음을 표시합니다.

• 구성 요소 그룹
• 구성 요소 제목
• 구성 요소 설명
• 구성 요소 아이콘
  • 구성 요소 제목 (기본값)​의 처음 두 문자
  • 사용자 지정 PNG 이미지 (개발자가 구성함)
  • 사용자 지정 SVG 이미지 (개발자가 구성)
  • CoralUI 아이콘 (개발자가 구성함)

구성 요소 아이콘 구성 옵션

약자

기본적으로 구성 요소 제목([cq:Component]@jcr:title)의 처음 2자가 약어로 사용됩니다. 예를 들어 [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 이미지를 구성 요소 아이콘으로 구성하려면 원하는 SVG를 [cq:Component] 아래에 nt:file cq:icon.svg 로 추가합니다.

SVG 이미지에는 배경색이 #707070​로 설정되고 크기가 20px x x x​이어야 합니다.

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

추가 리소스

• 사용 가능한 CoralUI 아이콘