文档AEM as a Cloud Service用户指南

使用布局模式调整自适应Forms的组件大小 use-layout-mode-to-resize-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • undefined
  • undefined
  • undefined

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

版本
文章链接
AEM 6.5
单击此处
AEM as a Cloud Service
本文

通过自适应表单创作界面，您可以使用布局模式调整组件大小。 拖动列中的蓝色圆点以定义起点和终点来定位组件。 点按响应式网格中的组件后，会显示蓝点。 响应式网格由12个相等的列组成。 备用列中的白色和蓝色阴影将一列与另一列区分开来。

您可以使用布局模式为所有设备类型（如台式机、平板电脑、手机和其他小型设备）调整组件大小。 平板电脑会自动从台式机版本获取布局配置，较小的设备则从手机获取布局配置。 但是，您可以覆盖自动派生的配置以针对每种设备类型定义不同的配置。

访问布局模式 access-layout-mode

从自适应表单创作界面顶部出现在​ 预览 ​选项旁边的下拉列表中选择​ 布局。 该表单将以布局模式显示。

  1. 登录到Adobe Experience Manager创作实例并导航到​ Adobe Experience Manager > Forms > Forms和文档。

  2. 创建新或打开现有的自适应表单。

  3. 从​ 预览 ​选项旁边顶部显示的下拉列表中选择​ 布局。 该表单将以布局模式显示。

    布局模式

调整组件大小 resize-components

  1. 在布局模式下，选择要调整大小的组件。 蓝点显示在响应式网格的开头和结尾。

  2. 拖放蓝点以定义组件在响应式网格中的位置。

    使用布局模式调整大小

    点按组件后显示的工具栏包含以下选项：

    • 父项：选择组件的父项。
    • 还原断点布局：撤消所有调整大小的更改，并将默认布局应用于组件。
    • 浮动到新行：如果同一行中有多个组件，则将组件移动到下一行。

    您还可以在面板级别使用​ 还原断点布局 （ 还原断点 ）选项来撤消所有调整大小的更改。

    note note
    NOTE
    无法使用布局模式调整表格列、工具栏、工具栏按钮和目标区域组件的大小。 使用样式模式调整这些组件的大小。

示例 example

目标： ​要插入表组件和图像组件，并在自适应表单中将其相互平行放置。

  1. 在自适应表单中使用编辑模式插入表和图像组件。 图像组件显示在表组件之后。

  2. 切换到布局模式并选择表组件。 用于调整组件大小的蓝点显示在列1和12。

  3. 将响应式网格第12列中的蓝色圆点拖到第6列。

    定义表的终结点

  4. 同样，选择Image组件并将响应式网格第1列中的蓝色圆点拖到第7列。 表格和图像组件彼此平行显示。

    在布局模式下并行 表和图像

    您可以选择图像组件，然后选择工具栏中可用的​ 浮动到新行 ​选项以将图像组件移动到下一行。

调整面板大小 resize-panels-layout-mode

如果要调整整个面板而非单个组件的大小，请执行以下步骤：

  1. 选择面板中要调整大小的任何组件，选择 选择父项 ，然后选择下拉列表中的第一个选项（如果该面板是组件的直接父项）。

    蓝点显示在响应式网格的开头和结尾。

  2. 拖放蓝点以定义面板在响应式网格中的位置。
    您可以重复步骤1和2，然后选择 选择父项 以将调整大小的面板移至下一行。

定义面板的多列布局

执行以下步骤可定义面板的列数：

  1. 在​ 编辑 ​模式下，选择面板，选择 配置 ，然后从​ 面板布局 ​下拉列表中选择​ 响应式 — 页面上的所有内容（不含导航） ​选项。

  2. 选择 保存 以保存属性。

  3. 在​ 布局 ​模式下，选择面板中的任何组件，选择 选择父项 ，然后选择面板。

  4. 选择 多列 并从下拉列表中选择列数。 列数可在1到12之间。 面板被分为多列布局。

布局模式下的多列

为旧响应布局启用新响应网格 enableresponsivegrid

为您使用Adobe Experience Manager Forms 6.4或更低版本创建的表单启用新响应式网格，以调整组件大小。

NOTE
切换到新的响应式网格会丢弃已为表单中使用的组件定义的布局属性。

执行以下步骤以启用新响应式网格：

  1. 从​ 预览 ​选项旁边顶部显示的下拉列表中选择​ 布局。 显示启用布局模式的确认。
  2. 选择​ 是 ​为表单启用​ 布局 ​模式。

使用新响应布局在自适应表单中嵌入旧片段 embed-an-old-fragment-in-an-adaptive-form-with-new-responsive-layout

新的自适应表单响应布局允许您向表单添加具有旧响应布局的自适应表单片段。 但是，新布局会丢弃为片段中使用的组件定义的布局属性。 您可以切换到布局模式以定义片段中使用的组件的布局属性。

在旧自适应表单中嵌入具有新响应布局的片段 embed-a-fragment-with-new-responsive-layout-in-an-old-adaptive-form

如果在具有旧响应布局的自适应表单中嵌入具有新响应布局的片段，则系统会提示您启用表单的布局模式并重新嵌入片段。

要启用“布局”模式，请从​ 预览 ​选项顶部出现的下拉列表中选择​ 布局，并选择​ 是 ​进行确认。 选择​ 编辑 ​模式以重新嵌入片段。

对具有旧响应布局的表单禁用布局模式 disable-layout-mode-for-forms-with-old-responsive-layout

您可以通过编辑表单中使用的模板的属性来禁用具有旧响应布局的表单的布局模式。

执行以下步骤可禁用布局模式：

  1. 选择​ 工具 > 常规 > 模板，并在​ 编辑 ​模式下打开表单中使用的模板。

  2. 在左窗格中选择表单容器，然后选择​ 策略。

    禁用布局模式

  3. 选择​ 布局设置 ​选项卡，然后选择​ 禁用布局模式。

  4. 选择 保存更改 以保存模板属性。

另请参阅 see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab