自适应表单组件的内联样式 inline-styling-of-adaptive-form-components
Adobe 建议使用现代、可扩展的数据捕获核心组件,以创建新的自适应表单或将自适应表单添加到 AEM Sites 页面。这些组件代表有关创建自适应表单的重大改进,确保实现令人印象深刻的用户体验。本文介绍了使用基础组件创作自适应表单的旧方法。
可以使用主题编辑器指定样式来定义自适应表单的整体外观和样式。 此外,您还可以将内联CSS样式应用于各个自适应表单组件并即时预览更改。 内联样式会覆盖主题中提供的样式。
应用内联CSS属性 apply-inline-css-properties
要将内联样式添加到组件,请执行以下操作:
-
在表单编辑器中打开表单,并将模式更改为样式模式。 要将模式更改为样式模式,请在页面工具栏中选择 > 样式。
-
在页面中选择组件,然后选择编辑按钮 。 样式属性在侧栏中打开。
您还可以从侧栏中的表单层次结构树中选择组件。 表单层次结构树在侧栏中可用作表单对象。
在样式模式下,您可以看到表单对象下列出的组件。 但是,侧边栏中的表单对象列表列出了字段和面板等组件。 字段和面板是可以包含文本框和单选按钮等组件的常规组件。
从侧栏中选择组件时,您将看到列出的所有子组件以及所选组件的属性。 您可以选择特定的子组件并设置其样式。
-
单击侧边栏中的选项卡以指定CSS属性。 您可以指定属性,例如:
- Dimension和位置 (显示设置、填充、高度、宽度、边距、位置、z索引、浮动、清除、溢出)
- 文本 (字体系列、粗细、颜色、大小、行高和对齐)
- 背景(图像和渐变,背景颜色)
- 边框(宽度、样式、颜色、半径)
- 效果(阴影、不透明度)
- 高级 (允许您为组件编写自定义CSS)
-
同样,可以为组件的其他部分应用样式,如小组件、题注和帮助。
-
选择 完成 以确认更改,或选择 取消 以放弃更改。
示例:字段组件的内联样式 example-inline-styles-for-a-field-component
以下图像描述了应用内联样式之前和之后的文本字段。
应用内联样式之前的
应用内联样式属性之前的文本框组件
请注意应用以下CSS属性后文本框样式的更改,如下图所示。
应用内联样式后的
应用内联样式属性后的文本框组件
按照上述步骤,您可以选择和设置其他组件的样式,如面板、提交按钮和单选按钮。
复制并粘贴样式 copy-paste-styles
您还可以在自适应表单中将样式从一个组件复制并粘贴到另一个组件。 在 样式 模式下,选择该组件并选择“复制”图标 。
选择相同类型的其他组件并选择“粘贴”图标 以粘贴复制的样式。 您还可以选择“清除样式”图标 以清除应用的样式。
为组件的不同状态设置样式 set-styles-for-states
您可以为组件类型的不同状态设置样式。 不同的状态包括: 焦点、已禁用、悬停、错误、成功和必需。
要定义组件状态的样式:
-
在 样式 模式下,选择该组件并选择“编辑”图标 。
-
使用 状态 下拉列表中选择组件的状态。
-
为组件的选定状态定义样式,然后选择 以保存属性。
您还可以模拟成功和错误状态。 选择“展开”图标以查看 模拟成功 和 模拟错误 选项。
另请参阅 see-also
- 创建 AEM 自适应表单
- 将 AEM Adaptive Form添加到 AEM Sites 页面
- 将主题应用于 AEM 自适应表单
- 将组件添加到 AEM 自适应表单
- 在 AEM 自适应表单中使用 CAPTCHA
- 生成一个 AEM Adaptive Form 的 PDF 版本(DoR)
- 翻译 AEM 自适应表单
- 为自适应表单启用 Adobe Analytics 以跟踪表单使用情况
- 将自适应表单连接到 Microsoft SharePoint
- 将自适应表单连接到 Microsoft Power Automate
- 将自适应表单连接到 Microsoft OneDrive
- 将自适应表单连接到 Microsoft Azure Blob 存储
- 将自适应表单连接到 Salesforce
- 在 AEM 自适应表单中使用 Adobe Sign
- 为自适应表单添加新区域设置
- 将自适应表单数据发送到数据库
- 将自适应表单数据发送到 REST 端点
- 将自适应表单数据发送到 AEM 工作流
- 使用 Forms Portal 在 AEM 网站上列出 AEM 自适应表单
- 向自适应表单添加版本控制、评论和注释
- 比较自适应表单