自适应表单的样式结构 styling-constructs-for-adaptive-forms

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

先决条件 prerequisites

了解CSS和LESS框架。

可自定义的内容 what-can-be-customized

本文列出了自适应表单的公开可用css类。 您可以使用这些类设置自适应表单各种组件的样式。 创作组件（如显示警告的对话框和状态栏）的样式超出了本文的范围。 仅当您无法通过以下方式设置组件的样式时，才使用这些样式构造创建样式（使用CSS或更少）： 主题编辑器.

在自适应表单中自定义样式 customizing-styles-in-adaptive-forms

LESS框架简化了自定义自适应表单中样式的用例。 该框架允许您使用一组变量和函数(mixin)定义样式。 LESS框架有助于减小捆绑代码的大小并提高其可重用性。

您可以通过以下方式自定义自适应表单样式：

更改主题 changing-theme

您可以更改自适应表单的主题，以确保其外观与嵌入了自适应表单的网页一致。

使用CSS属性更改自适应表单的整体外观通常是主题更改的一部分。 对自适应表单的“确定和感觉”所做的重大更改（如组件布局和放置的更改）不被视为主题更改。

根据引导，以下几组CSS属性定义了网页的主题：

目前，仅针对自适应表单中各种元素的这些属性定义了LESS变量。

更改组件样式 changing-component-style

可更改元素的外观、布局、位置和可见性。 要完成此任务，请创建或更新您的自定义.css文件，以包含本文中列出的样式构造。

要将样式应用于自适应表单，请在中打开自适应表单进行编辑，打开自适应表单容器的属性，在基本选项卡中指定自定义CSS文件的路径。 自适应表单的样式构造是默认的，并且被自定义.css文件中列出的构造覆盖。

组件 components

本文中讨论的组件具有预定义的CSS类。 您可以编辑变量以修改CSS类中的样式。 或者，您可以重写整个类。 本节介绍可以使用变量修改的组件和样式中的类。

容器样式 container-styling

容器是顶级组件。 其他面板和字段位于容器组件下。

字段样式 field-styling

自适应表单包括各种类型的字段。 每个字段都有一个唯一的类名称，即字段的名称。 该字段还具有公共类名称 guideFieldNode.

字段包括标签、小组件、帮助描述（长描述和短描述）和字段帮助图标（问号）。

标签样式 label-styling

HTML元素 标签 用于字段包括类 左侧 或 top 标签在顶部还是左侧。

使用以下方式应用标签的CSS规则 guideFieldLabel 标签。 如果您是作者，请覆盖此规则以使自定义更改可见。

构件样式 widgets-styling

根据其类型，构件还包含类。 通常，小组件包括 guideFieldWidget 类。 随HTML一起提供的小组件通常使用标准HTML元素输入和选择。 样式设置会相应地完成。 您不能通过更改变量来设置自定义小组件的样式。

构件样式设置的限制 limitations-in-widget-styling

焦点、必填和禁用的字段的样式受变量限制。 但是，您可以通过覆盖样式来更改它。 提供了使用变量的限制，主要是为了控制变量的数量。 如果字段由于处于前面讨论的任何状态而发生显着变化，则可以放松该限制。

帮助描述 help-description

作者可以使用短描述组件和长描述组件在字段中指定帮助内容。 两个组件都有一个公共类 .guideHelpDescription 和另一堂课 .long/ .short，具体取决于描述的类型。 帮助内容包含在段落元素中，用于覆盖描述的样式。 使用以widgetshelp开头的变量修改帮助说明（长说明和短说明），如下表所述：

条款和条件 terms-and-conditions

条款和条件(TnC) ``)小组件允许您指定条款和条件。 您可以使用下表所述的变量自定义构件。

按钮 button

按钮也是小组件。 但是，它们的样式与小组件略有不同。 在自适应表单中，以下任意值构成按钮：

按钮的HTML代码：

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

问号 question-mark

对于小组件，当作者在帮助内容中添加详细描述时，会显示问号。 使用bootstrap中提供的默认图标。 要使用自定义图标，可以自定义引导图标。

表 table

您可以使用以下变量更改表格中标题行和正文行的颜色主题。

文件附件 file-attachment

自适应表单的文件附件小组件允许您上传文件。 您还可以使用变量自定义构件。

导航器样式 navigator-styles

导航器选项卡有四种类型。 这些选项卡包括左侧选项卡、顶部选项卡、向导中的选项卡和折叠面板。 每个导航器具有不同的类。

以下是Tab导航器元素的HTML代码（与bootstrap选项卡类似）：

<li>

<a>tab title</a>

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></code>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

可以使用选择元素的CSS规则更改导航器的样式，这些元素使用 子项 选择器。 例如，要向锚点标记添加文本修饰样式，请执行以下操作：

顶部选项卡导航器：

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

此外，还有一些类可根据选项卡导航器（包括左侧和顶部）是否具有嵌套/子项/子导航器来设置其样式。

guideNavIcon类提供了一个默认图标，用于选项卡导航器（左侧和顶部）和向导导航器。

面板样式 panel-styling

面板包括可选工具栏及其内容。

面板节点分为导航器和内容。 那里 ``对于内容，没有单独的样式组件。 所描述的变量适用于导航器和内容。

最上面的面板(RootPanel)没有此类。

移动设备样式 mobile-styling

标题栏 header-bar

这些变量会影响在包含面板标题以及下一个和背面导航器的移动设备或小屏幕设备上显示的标题栏。

滚动指示器 scroll-indicator

这些变量会影响滚动指示器，即出现在移动设备或小屏幕设备上的橙色箭头。 滚动指示器指示屏幕可见部分以外的内容存在。 您可以向下滚动查看它。 点击内容结尾时，箭头消失。

移动设备固定工具栏布局特定的变量 mobile-fixed-toolbar-layout-specific-variables

下表中的这些变量会影响移动设备固定工具栏的布局。

主题特定变量 theme-specific-variable

此 简单注册 /etc/clientlibs/fd/af/guidetheme/simpleEnrollment上的主题和类别 guide.theme.simpleEnrollment 还引入了几个变量。 如果要创建主题以增强简单注册，您可以使用以下“额外变量：