折叠组件

核心组件折叠面板组件允许创建以折叠面板形式排列在页面上的面板集合。

使用

核心组件折叠面板组件允许创建组件集合,这些组件以面板形式组成,并排列在页面上的折叠面板中,与选项卡组件类似,但允许展开和折叠面板。

深层链接到面板

折叠面板和选项卡组件支持直接链接到组件中的面板。

要执行此操作:

  1. 使用页面编辑器中的​查看已发布的页面​选项查看组件的页面。
  2. Inspect页面内容并标识面板的ID。
    • 例如id="accordion-86196c94d3-item-ca319dbb0b"
  3. 该ID将成为您可以使用哈希(#)附加到URL的锚点。
    • 例如https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b

导航到将面板ID作为锚点的URL,浏览器将直接滚动到特定组件并显示指定的面板。 如果该面板配置为默认不展开,则会自动展开该面板。

版本和兼容性

折叠组件的当前版本为v1,该版本在2019年6月随核心组件2.5.0版引入,在本文档中进行了描述。

下表详细列出了组件的所有受支持版本、组件版本与之兼容的AEM版本,以及指向以前版本文档的链接。

组件版本 AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 兼容 兼容 兼容

有关核心组件版本和版本的更多信息,请参阅文档核心组件版本

组件输出示例

要体验折叠组件并查看其配置选项以及HTML和JSON输出的示例,请访问组件库

技术详细信息

有关可折叠组件的最新技术文档可在GitHub上找到。

有关开发核心组件的更多详细信息,请参阅核心组件开发人员文档

配置对话框

配置对话框允许内容作者定义折叠项目、其面板,以及该项目的行为方式和页面访客的显示方式。

“项目”选项卡

折叠组件编辑对话框的项目选项卡

使用​Add​按钮打开组件选择器以选择要添加为面板的组件。 添加后,会将一个条目添加到列表中,该列包含以下列:

  • 图标 — 面板组件类型的图标,可在列表中轻松识别。将鼠标悬停在上方可查看完整的组件名称作为工具提示。
  • 描述 — 用作面板文本的描述,默认使用为面板选择的组件的名称。
  • 删除 — 点按或单击以从折叠面板组件中删除面板。
  • 重新排列 — 点按或单击并拖动以重新排列面板的顺序。
小贴士

如果缩小了页面的视区,使编辑对话框变为全屏,则将隐藏​Add​按钮。 仍可以通过从组件浏览器中拖放到页面编辑器中的折叠组件🔗来将组件添加到折叠组件中。

“属性”选项卡

折叠组件编辑对话框的属性选项卡

  • 单个项目扩展 — 选中此选项后,会强制一次展开单个折叠项目。展开一个项目后,所有其他项目都将折叠。
  • 展开的项目 — 此选项定义在加载页面时默认展开的项目。
    • 选择​单项扩展​时,必须选择一个面板。 默认情况下,将选择第一个面板。
    • 未选择​单项扩展​时,此选项是多选项,是可选的。
  • ID — 利用此选项,可控制HTML和数据层中组件的唯一标识符 的唯一标识符
    • 如果留为空白,则会自动为您生成唯一ID,并且可以通过检查生成的页面找到该ID。
    • 如果指定了ID,则作者有责任确保该ID是唯一的。
    • 更改ID可能会影响CSS、JS和数据层跟踪。

选择面板弹出窗口

内容作者可以使用组件工具栏上的​选择面板​选项更改为其他面板进行编辑,并轻松地重新排列折叠面板中面板的顺序。

“选择面板”图标

在组件工具栏中选择​选择面板​选项后,配置的折叠面板将显示为下拉列表。

选择面板弹出窗口

  • 该列表按面板的指定排列顺序排列,并反映在编号中。
  • 首先显示面板的组件类型,然后以较浅字体显示面板的说明。
  • 点按或单击下拉菜单中的条目,会将编辑器中的视图切换到该面板。
  • 使用拖动手柄可以就地重新排列面板。

“设计”对话框

设计对话框允许模板作者定义内容作者可用的选项,这些选项使用折叠组件,并在放置折叠组件时设置默认值。

“属性”选项卡

“设计”对话框属性选项卡

  • 允许的标题元素 — 此多选下拉列表定义了作者允许选择的折叠项目标题HTML元素。
  • 默认标题元素 — 此下拉列表定义了默认的折叠项目标题HTML元素。

允许的组件选项卡

允许的组件​选项卡用于定义哪些组件可作为内容作者可折叠面板组件中的项目添加到面板。

在模板编辑器中定义布局容器的策略和属性时,允许的组件选项卡的功能与同名的选项卡相同。

“样式”选项卡

折叠面板组件支持AEM 样式系统

Adobe客户端数据层

折叠面板组件支持Adobe客户端数据层。

在此页面上