选项卡组件

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

使用

选项卡组件允许内容作者在多个选项卡中组织页面内容。

编辑对话框允许内容作者定义多个选项卡并设置活动选项卡。 使用设计对话框，模板作者可以定义哪些组件可以添加到选项卡并自定义样式。

深层链接到面板

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

要执行此操作：

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,2018年10月随核心组件的2.2.0版引入了v1，本文档中对此进行了说明。

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

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

有关核心组件版本和版本的详细信息，请参阅文档核心组件版本。

示例组件输出

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

技术详细信息

有关选项卡组件的最新技术文档可在GitHub上找到。

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

编辑对话框

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

项目选项卡

使用​添加​按钮打开组件选择器以选择要添加为选项卡的组件。 添加后，将向列表添加一个条目，该条目包含以下列：

• 图标 -选项卡的组件类型图标，以便在列表中进行标识。将鼠标悬停在上方，可将完整组件名称作为工具提示查看。
• 说明 -用作选项卡文本的说明，默认使用为选项卡选择的组件的名称。
• 删除 -点按或单击，从选项卡组件中删除选项卡。
• 重新排列 -点按或单击并拖动以重新排列选项卡的顺序。

属性选项卡

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

辅助功能选项卡

在​辅助功能​选项卡上，可以为组件的ARIA辅助功能标签设置值。

• 标签 -组件的ARIA标签属性的值

选择面板

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

在组件工具栏中选择​选择面板​选项后，将显示所配置的选项卡作为下拉列表。

• 列表按标签的分配排列排列，并反映在编号中。
• 首先显示选项卡的组件类型，然后以较淡的字体显示选项卡的说明。

• 点按或单击下拉菜单中的某个条目，将编辑器中的视图切换到该选项卡。
• 使用拖动手柄可以就地重新排列选项卡。

设计对话框

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

允许的组件选项卡

允许的组件​选项卡用于定义内容作者可以将哪些组件作为项目添加到选项卡组件。

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

样式选项卡

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