Show Menu
主题×

使用布局模式调整组件大小

自适应表单和交互式通信Web渠道创作界面使您能够使用布局模式调整组件大小。 在列中拖放蓝点,以定义开始点和结束点以放置组件。 点击响应式网格中的组件后,将显示蓝点。 响应式网格由12个相等的列组成。 替代列中的白色和蓝色底纹使一列与另一列区分开。
您可以使用布局模式调整所有设备类型(如桌面、平板电脑、手机和其他较小设备)的组件大小。 平板电脑自动从桌面版本派生布局配置,而较小的设备从手机派生布局配置。 但是,您可以覆盖自动派生的配置以为每个设备类型定义不同的配置。
如果您使用打印渠道作为交互式通信的主渠道 创建交互式通信 ,则可用于调整大小的组件还包括使用打印渠道在Web渠道中自动生成的子表单和字段。 Web渠道在“布局”模式下保留打印渠道元素的布局。

访问布局模式

从自 适应表单顶部显示的下拉列表中选择布局 ,并从“预览”选项旁边的“交互通信”创作界面顶部 选择 。 表单将以布局模式显示。
  1. 登录到AEM作者实例,然后导航到 Adobe Experience Manager > Forms > Forms & Documents
  2. 创建新表单 ,或打开现有的自适应表单或交互式通信。
  3. 从“ 预览 ”选项旁边顶部显示的下拉列表中选择“布 ”。 表单将以布局模式显示。

调整组件大小

  1. 在布局模式中,点按组件以调整大小。 蓝点显示在响应式网格的开始和结束处。
  2. 拖放蓝点以定义组件在响应式网格中的位置。
    点击组件后显示的工具栏包含以下选项:
    • 父项: 选择组件的父项。
    • 浮动到新行: 如果同一行中有多个组件,请将组件移到下一行。 您可以撤消所有调整大小的更改,并使用“还原断点”布局 (“还原断点” )选项将默认布局应用到包含已调整大小的组件的面板。 点按已调整大小的组件的父项以查看选项。
    不能使用布局模式调整表列、工具栏、工具栏按钮和目标区域组件的大小。 使用样式模式调整这些组件的大小。

示例

目标: 您希望插入表组件和图像组件,并在交互通信中将它们彼此平行放置。
  1. 在Web渠道中使用编辑模式插入表和图像组件。 图像组件显示在表组件之后。
  2. 切换到布局模式并点按表组件。 用于调整组件大小的蓝点显示在第1列和第12列。
  3. 将响应式网格的第12列的蓝点拖放到第6列。
  4. 同样,选择图像组件,并将响应式网格的第1列的蓝点拖放到第7列。 表和图像组件彼此平行地显示。
    您可以选择图像组件,然后点按工具栏中 提供的浮动到新行 ,以将图像组件移到下一行。

调整面板大小

如果要调整整个面板而不是单个组件的大小,请执行以下步骤:
  1. 点按面板中要调整大小的任何组件,选择 ,然后在下拉列表中选择第一个选项(如果面板是组件的直接父项)。
    蓝点显示在响应式网格的开始和结束处。
  2. 拖放蓝点以定义面板在响应式网格中的位置。 您可以重复第1步和第2步,然后选择“ ”,将调整大小的面板移到下一行。

为面板定义多列布局

执行以下步骤以定义面板的列数:
  1. 在模 式中 ,点按面板,选择配置 ,然后从面板布局编辑下拉列表中选择响应式——页面上的所有内容(无导航选项)。
  2. 点按 ,以保存属性。
  3. 在布局 模式中 ,点按面板中的任意组件,选择 ,然后选择面板。
  4. ,然后从下拉列表中选择列数。 列数范围从1到12。 该面板被分为多列布局。

为旧的响应式布局启用新的响应式网格

为使用AEM Forms 6.4或更低版本创建的表单启用新的响应式网格,以调整组件大小。
切换到新的响应式网格将放弃已为表单中使用的组件定义的布局属性。
请执行以下步骤以启用新的响应式网格:
  1. 从“ 预览 ”选项旁边顶部显示的下拉列表中选择“布 ”。 此时会显示启用布局模式的确认信息。
  2. 按是 ,为表单启 用布局模式

使用新的响应式布局将旧片段嵌入自适应表单

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

在旧的自适应表单中嵌入具有新响应式布局的片段

如果您在具有旧响应式布局的自适应表单中嵌入了具有新响应式布局的片段,系统会提示您为该表单启用布局模式并重新嵌入该片段。
要启用布局模式,请从“预 ”选项旁边顶部显示的下拉列表中选择“布局”,然后点按“是 进行确认。 选择 编辑模式 ,以重新嵌入片段。

使用旧的响应式布局禁用表单的布局模式

您可以通过编辑表单中使用的模板的属性,为具有响应式布局的旧表单禁用布局模式。
执行以下步骤以禁用布局模式:
  1. 选择 >常规 ” > “模 板” ,然后在“编辑工具”模式中打开在表单 中使用的模板。
  2. 在左侧窗格中选择文档容器,然后点按 策略。
  3. 点按布局 设置选项卡 ,然后选择 禁用布局模式 ​。
  4. 点按 ,以保存模板属性。