自适应表单的样式构造

前提条件

了解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元素输入和选择。 样式将相应地进行。 无法通过更改变量来设置自定义构件的样式。

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链接的字体颜色。

按钮

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

  • 输入[类型= 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.

文件附件

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

变量

描述

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

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

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

&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

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

在此页面上