自适应Forms的布局功能 layout-capabilities-of-adaptive-forms

Adobe 建议使用现代、可扩展的数据捕获核心组件，以创建新的自适应表单或将自适应表单添加到 AEM Sites 页面。这些组件代表有关创建自适应表单的重大改进，确保实现令人印象深刻的用户体验。本文介绍了使用基础组件创作自适应表单的旧方法。

Adobe Experience Manager允许您创建易于使用的自适应Forms，为最终用户提供动态体验。 表单布局控制项或组件在自适应表单中的显示方式。

布局类型 types-of-layouts

自适应表单为您提供以下类型的布局：

面板布局 ​控制如何在设备上显示面板中的项或组件。

移动设备布局 ​控制移动设备上的表单导航。 如果设备宽度为768像素或更高，则布局被视为移动设备布局并适用于移动设备。

工具栏布局 ​控制操作按钮在表单工具栏或面板工具栏中的位置。

所有这些面板布局都定义在/libs/fd/af/layouts位置。

要更改自适应表单的布局，请在Experience Manager中使用创作模式。

面板布局 panel-layout

表单作者可以将布局与自适应表单的每个面板（包括根面板）关联。

面板布局位于/libs/fd/af/layouts/panel位置。 选择面板，然后选择 以查看面板属性。

响应 — 页面上的所有内容，无需导航 responsive-everything-on-one-page-without-navigation-br

使用此面板布局可创建响应式布局，该布局可调整设备的屏幕大小，而无需任何专门的导航。

使用此布局，您可以将多个​ 面板自适应表单 ​组件逐个放置在面板中。

向导 wizard

使用此面板布局可在表单中提供引导式导航。 例如，当您希望在表单中捕获强制信息时使用此布局，同时逐步引导用户。

使用​ 面板自适应表单 ​组件在面板中提供分步导航。 使用此布局时，用户仅在当前步骤完成后才会进入下一步

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

可折叠项 layout-for-accordion-design

使用此布局，您可以将​ 面板自适应表单 ​组件放在具有折叠样式导航的面板中。 使用此布局，您还可以创建可重复的面板。 可重复面板允许您根据需要动态添加或移除面板。 您可以定义面板重复的最小和最大次数。 此外，可以根据面板项中提供的信息来动态确定面板的标题。

摘要表达式可用于显示用户在最小化面板的标题中提供的值。

选项卡式布局 — 选项卡显示在左侧 tabbed-layout-tabs-appear-on-the-left

使用此布局，您可以将​ 面板自适应表单 ​组件放在具有选项卡导航的面板中。 选项卡位于面板内容的左侧。

显示在面板左侧的选项卡

选项卡式布局 — 选项卡显示在顶部 tabbed-layout-tabs-appear-on-the-top

使用此布局，您可以将​ 面板自适应表单 ​组件放在具有选项卡导航的面板中。 选项卡位于面板内容的顶部。

移动设备布局 mobile-layouts

移动设备布局允许在屏幕相对较小的移动设备上进行用户友好的导航。 移动设备布局使用选项卡式或向导式样式进行表单导航。 应用移动设备布局可为整个表单提供单个布局。

此布局使用导航栏和导航菜单控制导航。 导航栏显示​ < ​和​ > ​图标，以指示表单中的​ 下一个 ​和​ 上一个 ​导航步骤。

移动设备布局位于/libs/fd/af/layouts/mobile/位置。 默认情况下，自适应Forms中提供了以下移动设备布局。

选择​ 将响应布局的可导航项目添加到移动设备菜单 ​选项，以查看移动设备布局中面板可用的可导航选项。 仅当您为面板选择​ Responsive ​布局时，可导航选项才可见。

使用移动设备布局时，通过点按 图标，可以使用表单菜单访问各种表单面板。

表单标题中具有面板标题的布局 layout-with-panel-titles-in-the-form-header

顾名思义，此布局显示面板标题以及导航菜单和导航栏。 此布局还提供用于导航的“下一个”和“上一个”图标。

表单标题中没有面板标题的布局 layout-without-panel-titles-in-the-form-header

顾名思义，此布局仅显示没有面板标题的导航菜单和导航栏。 此布局还提供用于导航的“下一个”和“上一个”图标。

另请参阅 see-also