Show Menu
主题×

自适应表单的样式构造

前提条件

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
构件的字体颜色简短工具提示帮助

Terms and Conditions

条款与条件(TnC )构件允许您指定条款和条件。 您可以使用下表中描述的变量自定义构件。
变量
描述
tnc-unvisited 未访问的tnc链接的字体颜色。
tnc-visited 访问的tnc链接的字体颜色。

按钮

按钮也是构件。 但是,其样式与构件略有不同。 在自适应表单中,以下任一选项都构成一个按钮:
  • #
  • 按钮
  • 元素与类。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
警报按钮的边框颜色

Question mark

对于构件,当作者在“帮助”内容中添加详细说明时,将显示问号。 使用引导中提供的默认图标。 要使用自定义图标,您可以自定义引导图标。
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
构件中“预览”图标(“引导”图标)的颜色
fileItemCommentHeight
文件项的注释高度

面板样式

面板包括可选工具栏及其内容。
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
面板帮助的指示器边框颜色
面板节点被分为导航器和内容。 内容 没有单独的样式组件。 描述的变量适用于导航器和内容。
最上方的面板(RootPanel)没有此类。

移动样式

Header bar

这些变量会影响在移动设备或小屏幕设备上可见的标题栏,这些设备包含面板标题以及下一个和后面的导航器。
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
移动设备上工具栏的背景颜色

主题特定变量

位于 /etc/clientlibs/fd/af/guidetheme/simpleEngromment的简单登记主题和类别 guide.theme.simpleEnrollment 也引入了一些变量。 如果要创建增强简单登记的主题,可以使用以下“其他变量:
变量
描述
button-focus-bg-color
焦点按钮的背景颜色
button-hover-bg-color
悬停时按钮的背景颜色
button-radius
按钮的半径
navigation-button-bg-color
导航按钮的背景颜色(后退/下一步)
navigation-button-bg-hover-color
悬停时导航按钮的背景颜色(后退/下一步)
initial-nav-color
首次渲染时,向导导航器和相应进度栏的背景颜色。
active-nav-color
当前/活动向导导航器和相应进度栏的背景颜色
visited-nav-color
已访问的向导导航器和相应进度栏的背景颜色。
tabs-bifercating-border-color
将容器分成导航器和面板的边框颜色
tabs-navigator-separator-color
左侧选项卡(选项卡导航器)的底部边框颜色分隔选项卡。
tabs-child-nav-bg-color
导航器的嵌套/子/子导航器的背景颜色