自定义组件图标

组件图标允许作者通过图标或有意义的缩写快速识别组件。 现在,作者可以比以往更快地找到构建其Web体验所需的组件。

组件浏览器现在以一致的灰色主题显示,其中显示:

  • 组件组
  • 组件标题
  • 组件描述
  • 组件图标
    • 组件标题​(默认)​的前两个字母
    • 自定义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 x 20px。 但是,要容纳视网膜显示器​40px by 40px,可能更好。

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

SVG图像

SVG图像(基于矢量)可用于组件图标。 要将SVG图像配置为组件图标,请在​[cq:Component]​下将所需的SVG添加为​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"

其他资源

在此页面上