Show Menu
主题×

选项卡组件

核心组件选项卡组件允许将内容组织到多个选项卡上。

使用

选项卡组件允许内容作者在多个选项卡中组织页面内容。
在编 辑对话框中 ,内容作者可以定义多个选项卡并设置活动选项卡。 使用设 计对话框 ,模板作者可以定义可添加到选项卡的组件并自定义样式。
支持嵌套的选项卡组件(选项卡中的选项卡)。
使用内容树可以定位/选择简单(非嵌套)选 项卡组件 ,但嵌套的选项卡不能。

到面板的深层链接

选项卡和折 叠组件 ,支持直接链接到组件中的面板。
要执行此操作:
  1. 使用页面编辑器中的“视图 ,将页面与组件视图。
  2. 检查页面内容并标识面板的ID。
    • For example
      id="accordion-86196c94d3-item-ca319dbb0b"
  3. 该ID成为可使用散列()附加到URL的锚
    #
    点。
    • For example
      https://wknd.site/content/wknd/language-masters/en/magazine/western-australia.html#accordion-86196c94d3-item-ca319dbb0b
导航到面板ID为锚点的URL,浏览器将直接滚动到特定组件并显示指定的面板。 如果面板配置为默认不展开,则会自动展开面板。

版本和兼容性

标签组件的当前版本为v1,2018年10月随核心组件的2.2.0版引入了v1,本文档中对此进行了说明。
下表详细列出了组件的所有受支持版本、与组件版本兼容的AEM版本以及指向先前版本文档的链接。
组件版本
AEM 6.4
AEM 6.5
AEM 云服务
v1
兼容
兼容
兼容
有关核心组件版本和版本的详细信息,请参阅文档 核心组件版本

示例组件输出

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

技术详细信息

可在GitHub上找到有关选项卡组 件的最新技术文档
有关开发核心组件的更多详细信息,请参阅核 心组件开发人员文档

Edit Dialog

编辑对话框允许内容作者创建、重命名和重新排列选项卡以及定义活动选项卡。

项目选项卡

使用添
加按钮
,打开组件选择器以选择要添加为选项卡的组件。 添加后,将向列表添加一个条目,该条目包含以下列:
  • 图标
    -选项卡的组件类型图标,以便在列表中进行标识。 将鼠标悬停在上方,可将完整组件名称作为工具提示查看。
  • 说明
    -用作选项卡文本的说明,默认使用为选项卡选择的组件的名称。
  • 删除
    -点按或单击,从选项卡组件中删除选项卡。
  • 重新排列
    -点按或单击并拖动以重新排列选项卡的顺序。
如果缩小了页面的视区,使编辑对话框变为全屏,则“添
”按钮将被隐藏。 通过从组件浏览器拖放并放 到页面编辑器中的选项卡组件,仍可将组件添加到选项卡组件

属性选项卡

  • 活动项
    -内容作者可以定义载入页面时处于活动状态的选项卡。
    • 使用“
      默认
      ”选项,将选择第一个选项卡。
  • ID
    —— 此选项允许控制HTML和数据层中组件的唯一标 识符
    • 如果留空,则会自动为您生成唯一ID,并可通过检查生成的页面找到该ID。
    • 如果指定了ID,则作者有责任确保它是唯一的。
    • 更改ID可能会影响CSS、JS和数据层跟踪。

“辅助功能”选项卡

在“辅
助功能
”选项卡上,可以为组 件的ARIA辅助功 能标签设置值。
  • 标签
    -组件的ARIA标签属性的值

Select Panel

内容作者可以使用组
件工具栏上的
“选择面板”选项更改为其他面板进行编辑,并轻松重新排列选项卡的顺序。
在组件工
具栏中
选择“选择面板”选项后,将显示已配置的选项卡作为下拉列表。
  • 列表按标签的分配排列排列,并反映在编号中。
  • 首先显示选项卡的组件类型,然后以较淡的字体显示选项卡的说明。
  • 点按或单击下拉框中的条目,将编辑器中的视图切换到该选项卡。
  • 使用拖动手柄可以就地重新排列选项卡。
创作者在编辑模式下无法选择
选项卡
。 使用 ​模式或“已发​ 布的视图”选项与选项卡进行交互,就像已发布内容的读者一样。

设计对话框

设计对话框允许模板作者定义哪些组件可以作为项目添加到选项卡组件,以及定义哪些自定义样式可供内容作者使用。

Allowed Components Tab

许的组件
选项卡用于定义内容作者可以将哪些组件作为项目添加到选项卡组件。
当在模板编辑器中定义布局容器的策略和属性时,允许的组 件选项卡的功能与同名选项卡的功能相同。

样式选项卡

选项卡组件支持AEM 样式系统