自适应表单的样式构造

前提条件

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元素​label​包括类​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元素输入和选择。 样式将相应地进行。 无法通过更改变量来设置自定义Widget的样式。

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

 Widget的CSS行高属性

widgets-padding

Widget的CSS填充属性

widgets-focus-border-color

Widget处于焦点时的边框颜色

widgets-mandatory-border-color

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

widgets-mandatory-bg-color

强制字段的Widget的背景颜色

widgets-disabled-bg-color

禁用域时构件的背景颜色

widgets-disabled-font-color

禁用域时构件的字体颜色

widgets-disabled-border-color

禁用域时构件的边框颜色

widget-height

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

checkbutton-height

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

listboxwidget-height

多选下拉列表的最大高度

Widget样式的限制

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

帮助说明

作者可以使用简短和详细说明组件在字段中指定帮助内容。 根据描述的类型，这两个组件都有一个公用类.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 )构件允许您指定条款和条件。 您可以使用下表中描述的变量自定义Widget。

变量

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

按钮

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

  • input[type = text]
  • 按钮
  • .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

警报按钮的边框颜色

问号

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

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.

文件附件

通过自适应表单的文件附件Widget，您可以上传文件。 您还可以使用变量自定义Widget。

变量

描述

fileItemPadding

Widget中显示的文件的填充

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

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

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

&ast；最上面的面板(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

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now