自适应表单组件的内联样式 inline-styling-of-adaptive-form-components

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

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

您可以通过以下方式指定样式,来定义自适应表单的整体外观和样式: 主题编辑器. 此外,您还可以将内联CSS样式应用于各个自适应表单组件并即时预览更改。 内联样式会覆盖主题中提供的样式。

应用内联CSS属性 apply-inline-css-properties

要将内联样式添加到组件,请执行以下操作:

  1. 在表单编辑器中打开表单,并将模式更改为样式模式。 要将模式更改为样式模式,请在页面工具栏中选择 画布下拉列表 > 样式.

  2. 在页面中选择组件,然后选择编辑按钮 编辑按钮 . 样式属性在侧栏中打开。

    您还可以从侧栏中的表单层次结构树中选择组件。 表单层次结构树在侧栏中可用作表单对象。

    在 样式 模式中,您可以看到表单对象下列出的组件。 但是,侧边栏中的表单对象列表列出了字段和面板等组件。 字段和面板是可以包含文本框和单选按钮等组件的常规组件。

    从侧栏中选择组件时,您将看到列出的所有子组件以及所选组件的属性。 您可以选择特定的子组件并设置其样式。

  3. 单击侧边栏中的选项卡以指定CSS属性。 您可以指定属性,例如:

    • Dimension和位置 (显示设置、填充、高度、宽度、边距、位置、z索引、浮动、清除、溢出)
    • 文本 (字体系列、粗细、颜色、大小、行高和对齐)
    • 背景 (图像和渐变,背景颜色)
    • 边框 (宽度、样式、颜色、半径)
    • 效果 (阴影、不透明度)
    • 高级 (允许您为组件编写自定义CSS)
  4. 同样,可以为组件的其他部分应用样式,例如 构件, 题注、和 帮助.

  5. 选择 完成 确认更改或 取消 以放弃更改。

示例:字段组件的内联样式 example-inline-styles-for-a-field-component

以下图像描述了应用内联样式之前和之后的文本字段。

应用内联样式之前的文本框组件

应用内联样式属性之前的文本框组件

请注意应用以下CSS属性后文本框样式的更改,如下图所示。

选择器
CSS属性
价值
效果
字段
边框

边框宽度=2像素

边框样式=实线

边框颜色=#1111

在字段周围创建2像素宽的黑色边框
文本框
background-color
#6495ED

将背景颜色更改为CornflowerBlue (#6495ED)

注意:您可以在值字段中指定颜色名称或其十六进制代码。

标签
Dimension和位置>宽度
100像素
将标签的宽度固定为100px
字段帮助图标
文本>字体颜色
#2ECC40
更改帮助图标面部的颜色。
详细描述
text-align
居中
将帮助的详细描述调整到中心

应用内联样式后的文本框样式

应用内联样式属性后的文本框组件

按照上述步骤,您可以选择和设置其他组件的样式,如面板、提交按钮和单选按钮。

NOTE
根据您选择的组件,样式属性会有所不同。

复制并粘贴样式 copy-paste-styles

您还可以在自适应表单中将样式从一个组件复制并粘贴到另一个组件。 在 样式 模式,选择组件并选择复制图标 复制 .

选择相同类型的另一个组件,然后选择粘贴图标 复制 以粘贴复制的样式。 也可以选择“清除样式”图标 复制 以清除应用的样式。

为组件的不同状态设置样式 set-styles-for-states

您可以为组件类型的不同状态设置样式。 不同的状态包括: 焦点, 已禁用, 悬停, 错误, 成功、和 必需.

要定义组件状态的样式:

  1. 样式 模式,选择组件并选择编辑图标 编辑 .

  2. 使用选择组件的状态 状态 下拉列表。

    选择状态

  3. 为元件的选定状态定义样式,然后选择 保存 以保存属性。

您还可以模拟成功和错误状态。 选择展开图标以查看 模拟成功模拟错误 选项。

模拟状态

另请参阅 see-also

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