选项卡组件

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

使用

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

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

深层链接到面板

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

要执行此操作：

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版引入，在本文档中进行了描述。

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

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

组件输出示例

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

技术详细信息

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

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

编辑对话框

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

项目选项卡

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

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

属性选项卡

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

辅助功能选项卡

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

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

选择面板

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

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

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

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

设计对话框

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

允许的组件选项卡

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

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

样式选项卡

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

Adobe客户端数据层

选项卡组件支持Adobe客户端数据层。