自适应表单的样式构建

注意

AEM 6.4已结束扩展支持，本文档将不再更新。 有关更多详细信息，请参阅 技术支助期. 查找支持的版本 此处.

前提条件

了解CSS和LESS框架。

可自定义的内容

文章列出了自适应表单的公开可用css类。 您可以利用这些类来设置自适应表单中各个组件的样式。 创作组件的样式（如显示警告的对话框和状态栏）不在本文的涵盖范围内。 仅当您无法使用为组件设置样式时，才使用这些样式结构创建样式（使用CSS或更少） 主题编辑器.

在自适应表单中自定义样式

LESS框架简化了用例，以自定义自适应表单中的样式。 框架允许您使用一组变量和函数（混合）来定义样式。 LESS框架有助于减小捆绑代码的大小并增加其可重用性。

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

  • 更改主题
  • 更改组件样式

更改主题

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

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

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

  • 背景颜色
  • 边框（类型、颜色、粗细）
  • 字体颜色
  • 边距
  • 边距
  • 字体大小
  • LineHeight

目前，只为自适应表单中各元素的这些属性定义LESS变量。

更改组件样式

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

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

组件

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

容器样式

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

CSS 类

guideContainerNode

变量描述

变量描述

container-bgColor

容器的背景颜色

container-padding

容器的内边距

container-margin

容器的边距

container-fontColor

容器的字体颜色

字段样式

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

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

CSS 类

guideFieldNode

变量

描述

field-padding

字段的内边距

field-error-font-color

字段错误消息的字体颜色

field-error-font-size

字段错误消息的字体大小

标签样式

HTML元素 标签 用于字段的包括类 left 或 top 取决于标签位于顶部还是左侧。

CSS 类

guideFieldLabel

变量

描述

label-font-color

字段标签的字体颜色

label-font-size

字段标签的字体大小

label-line-height

 字段标签的CSS行高属性

label-font-weight

 字段标签的CSS字体粗细属性

label-margin

字段标签的边距

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

小组件样式

小组件还包含类，具体取决于其类型。 通常，小组件包括 guideFieldWidget 类。 随HTML一起提供的小组件通常使用标准HTML元素输入和选择。 样式将相应地进行。 无法通过更改变量来设置自定义小组件的样式。

CSS 类

guideFieldWidget

变量

描述

widgets-bg-color

 小组件的背景颜色（复选框和单选按钮不起作用）

widgets-border-color

小组件的边框颜色

widgets-border-thickness

小组件的边框大小

widgets-border-radius

小组件的边框半径

widgets-border-type

小组件的边框类型

widget-border-focus-type

小组件边框的焦点类型

widgets-border

小组件的合并边框样式

widgets-font-color

小组件内文本的颜色

widgets-font-size

小组件内的文本大小

widgets-line-height

 小组件的CSS行高属性

widgets-padding

小组件的CSS内边距属性

widgets-focus-border-color

小组件聚焦时的边框颜色

widgets-mandatory-border-color

用于必填字段的小组件的边框颜色

widgets-mandatory-bg-color

必填字段小组件的背景颜色

widgets-disabled-bg-color

禁用字段时小组件的背景颜色

widgets-disabled-font-color

禁用字段时小组件的字体颜色

widgets-disabled-border-color

禁用字段时小组件的边框颜色

widget-height

 小组件的高度（不适用于复选框和单选按钮）

checkbutton-height

复选框和单选按钮的高度。

listboxwidget-height

多选下拉菜单的最大高度

小组件样式限制

焦点、必填和禁用字段的样式使用变量进行限制。 但是，您可以通过覆盖样式来更改样式。 提供使用变量的限制主要是为了保持对变量数的检查。 如果字段的外观发生显着变化，则可以放松限制，因为它位于前面讨论的任何状态中。

帮助描述

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

变量

描述

widgets-help-long-bg-color

小组件的长帮助的背景颜色

widgets-help-long-border-color

小组件的边框颜色长帮助

widgets-help-long-border-indicator-color

小组件的左指示器边框颜色的长帮助

widgets-help-short-bg-color

小组件的简短帮助的背景颜色

widgets-help-short-color

小组件的字体颜色简短帮助

widgets-help-short-tooltip-bg-color

小组件的短工具提示的背景颜色帮助

widgets-help-short-tooltip-color

小组件的短工具提示的字体颜色帮助

条款和条件

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

变量

描述
tnc-unvisited 未访问的tnc链接的字体颜色。
tnc-visited 访问的tnc链接的字体颜色。

按钮

按钮也是小组件。 但是，其样式与小组件略有不同。 在自适应表单中，以下任一选项都构成按钮：

  • 输入[type = text]
  • 按钮
  • 具有class.button的元素

HTML按钮代码：

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

CSS 类

描述

iconButton-icon

提供按钮的图标

iconButton-label

“样式”按钮标签/标题

变量

描述

button-border-size

按钮的边框大小

button-border-type

边框类型

button-padding

按钮的CSS内边距属性

button-font-size

按钮的字体大小

button-background-color

按钮的背景颜色

button-font-color

按钮的字体颜色

button-border-color

按钮的边框颜色

button-large-padding

大按钮的内边距（具有类.buttonlarge的按钮）

button-large-font-size

大按钮的字体大小

button-small-padding

小按钮的内边距（具有类.buttonsmall的按钮）

button-small-font-size

小按钮的字体大小

button-info-background-color

用于提供信息的按钮的背景颜色（具有类.buttoninformative的按钮）

button-info-font-color

用于提供信息的按钮的字体颜色

button-info-border-color

用于提供信息的按钮的边框颜色

button-warning-background-color

警告样式化按钮的背景颜色（具有类.buttonwarning的按钮）

button-warning-font-color

警告样式化按钮的字体颜色

button-warning-border-color

警告样式化按钮的边框颜色

button-alert-background-color

警报按钮的背景颜色（具有类.buttonalert的按钮）

button-alert-font-color

警报按钮的字体颜色

button-alert-border-color

警报按钮的边框颜色

问号

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

CSS 类

guideHelpQuestionMark

变量

描述

questionmark-font-color

图标的颜色

questionmark-hover-font-color

将鼠标悬停在图标上方时图标的颜色

表

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

变量

描述

table-header-bg-color

标题行的背景颜色。 默认值为 #333。

table-odd-row-bg-color

奇数主体行的背景颜色。 默认值为 rgb(255, 255, 255)。

table-even-row-bg-color

偶数主体行的背景颜色。 默认值为 #eee。

文件附件

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

变量

描述

fileItemPadding

小组件中显示的文件的边距

fileItemBackground

文件项的背景颜色

fileItemBorderColor

上边框的边框颜色

fileItemColor

文件项的字体颜色

filePreviewIconColor

小组件中“预览”图标(Bootstrap图标)的颜色

fileItemCommentHeight

文件项的注释高度

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

导航器

CSS 类

Accordion

.accordion-navigators

tabs on the left

.tab-navigators-vertical

tabs on the top

.tab-navigators

Wizard

.向导 — 导航器

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

<li>

tab title

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

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

........................... 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;

}

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

CSS 类

描述

nested_true

具有嵌套/子/子导航器的选项卡导航器（左侧和顶部）

nested_false

没有嵌套/子/子导航器的选项卡导航器（左侧和顶部）

guideNavIcon类为选项卡导航器（左上方）和向导导航器提供了默认图标。

CSS 类

guideNavIcon
注意

在创作中，通过在面板上提供CSS类（表单示例），可以更改特定导航器的图标 <class_name>. 添加 <class_name>_nav 的上界。

变量

描述

选项卡导航器

navigator-bg-color

整个选项卡导航器的背景颜色

tabs-bg-color

选项卡的背景颜色

tabs-font-color

选项卡的字体颜色

tabs-hover-bg-color

悬停时选项卡的背景颜色

tabs-hover-font-color

悬停时选项卡的字体颜色

tabs-active-bg-color

面板聚焦时的背景颜色（活动）

tabs-active-font-color

面板聚焦时的字体颜色

tabs-completed-bg-color

面板的完成表达式返回true时的背景颜色

tabs-completed-font-color

面板的完成表达式返回true时的字体颜色

tabs-stepped-bg-color

 面板聚焦一次但完成表达式返回false时的背景颜色

tabs-stepped-font-color

 当面板聚焦一次但完成表达式返回false时，字体颜色

tabs-border-color

选项卡的边框颜色

tabs-font-size

选项卡的字体大小

tabs-padding

选项卡的内边距

tabs-margin

选项卡的边距

tabs-vertical-margin

垂直选项卡的边距

tabs-border-thickness

选项卡的边框大小

tabs-min-height

选项卡的最小高度

heirarichal-indent

嵌套选项卡的缩进

向导导航器

wizard-navigator-bg-color

 整个向导导航器的背景颜色

wizard-tabs-bg-color

向导的背景颜色

wizard-tabs-font-color

向导的字体颜色

wizard-tabs-active-bg-color

面板聚焦时的背景颜色（活动）

wizard-tabs-active-font-color

面板聚焦时的字体颜色（聚焦）

wizard-tabs-completed-bg-color

面板的完成表达式返回true时的背景颜色

wizard-tabs-completed-font-color

面板的完成表达式返回true时的字体颜色

wizard-tabs-stepped-bg-color

 面板聚焦一次但完成表达式返回false时的背景颜色

wizard-tabs-stepped-font-color

面板聚焦一次但完成表达式返回false时的字体颜色

wizard-tabs-border-color

向导的颜色

wizard-tabs-font-size

向导的字体大小

wizard-tabs-padding

向导的内边距

wizard-tabs-border-thickness

向导的边框大小

wizard-nav-bullet-border

向导导航器项目符号的边框颜色（在标题/标签前添加前缀）

wizard-progress-bg-color

向导导航器进度栏的背景颜色

wizard-progress-color

进度条的填充颜色

折叠导航器

accordion-tabs-padding

折叠面板的内边距

面板样式

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

CSS 类

guidePanelNode

变量

描述

panel-background-color

面板的背景颜色

panel-font-size

面板文本的字体大小

panel-font-color

面板文本的字体颜色

panel-padding

面板内边距

panel-description-font-size

面板描述的字体大小

panel-description-padding

面板描述的内边距

panel-help-bg-color

面板帮助的背景颜色

panel-help-border-indicator-color

面板帮助的指示器边框颜色

面板节点分为导航器和内容。 那里 不是内容的单独样式组件。 描述的变量将应用于导航器和内容。

(&A)；最顶部的面板(RootPanel)没有此类。

移动设备样式

标题栏

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

CSS 类

guide-header-bar

变量

描述

headerbar-background-color

标题栏的背景颜色

headerbar-font-color

标题栏中文本的字体颜色

headerbar-padding

标题栏的内边距

滚动指示器

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

CSS 类

mobileScrollIndicator

变量

描述

scrollIndicatorBottom

从底部滚动的固定位置

scrollIndicatorRight

从右起的滚动器的固定位置

scrollIndicatorWidth

滚动条宽度

scrollIndicatorHeight

阴划器高度

移动设备固定工具栏特定于布局的变量

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

CSS 类

mobileToolbar

变量

描述

mobileToolbarBottom

固定了工具栏在移动设备上的底部位置

mobileToolbarTop

修复了工具栏在移动设备上从顶部的位置

mobileToolbarLeft

修复了工具栏在移动设备上左侧的位置

mobileToolbarRight

修复了工具栏在移动设备上右侧的位置

mobileButtonIconTopMargin

修复了工具栏按钮图标（从顶部）的位置

mobileButtonIconWidth

移动设备上工具栏按钮图标的宽度

mobileButtonIconHeight

移动设备上工具栏按钮图标的高度

mobilefixedtoolbarbgcolor

移动设备上工具栏的背景颜色

在此页面上