了解CSS和LESS框架。
文章列出了自适应表单的公开可用css类。 您可以利用这些类来设置自适应表单中各个组件的样式。 创作组件的样式(如显示警告的对话框和状态栏)不在本文的涵盖范围内。 仅当您无法使用为组件设置样式时,才使用这些样式结构创建样式(使用CSS或更少) 主题编辑器.
LESS框架简化了用例,以自定义自适应表单中的样式。 框架允许您使用一组变量和函数(混合)来定义样式。 LESS框架有助于减小捆绑代码的大小并增加其可重用性。
您可以通过以下方式自定义自适应表单样式:
您可以更改自适应表单的主题,以确保其外观与嵌入了自适应表单的网页一致。
使用CSS属性更改自适应表单的整体外观通常是主题更改的一部分。 对“自适应表单的确定和感觉”这一操作进行的重大更改(如组件布局和位置的更改)不会被视为主题更改。
根据引导,以下一组CSS属性定义网页的主题:
目前,只为自适应表单中各元素的这些属性定义LESS变量。
您可以更改元素的外观、布局、位置和可见性。 要完成此任务,请创建或更新自定义.css文件,以包含本文中列出的样式结构。
要将样式应用于自适应表单,请在中打开自适应表单进行编辑,打开自适应表单容器的属性,在基本选项卡中指定自定义CSS文件的路径。 自适应表单的默认样式构造,并使用自定义.css文件中列出的构造来覆盖它。
本文中讨论的组件具有其预定义的CSS类。 您可以编辑变量以修改CSS类中的样式。 或者,您也可以重写整个类。 本节介绍组件和样式中可以使用变量修改的类。
容器是顶级组件。 其他面板和字段位于容器组件下。
CSS 类 |
|
变量描述 |
变量描述 |
|
容器的背景颜色 |
|
容器的内边距 |
|
容器的边距 |
|
容器的字体颜色 |
自适应表单包括各种类型的字段。 每个字段都有一个唯一的类名称,即字段的名称。 该字段还具有通用类名称 guideFieldNode
.
字段包括标签、小组件、帮助描述(包括长描述和短描述)和字段帮助图标(问号)。
CSS 类 |
|
变量 |
描述 |
|
字段的内边距 |
|
字段错误消息的字体颜色 |
|
字段错误消息的字体大小 |
HTML元素 标签 用于字段的包括类 left 或 top 取决于标签位于顶部还是左侧。
CSS 类 |
|
变量 |
描述 |
|
字段标签的字体颜色 |
|
字段标签的字体大小 |
|
字段标签的CSS行高属性 |
|
字段标签的CSS字体粗细属性 |
|
字段标签的边距 |
标签的CSS规则将使用 guideFieldLabel 标签。 如果您是作者,请覆盖此规则以使自定义更改可见。
小组件还包含类,具体取决于其类型。 通常,小组件包括 guideFieldWidget
类。 随HTML一起提供的小组件通常使用标准HTML元素输入和选择。 样式将相应地进行。 无法通过更改变量来设置自定义小组件的样式。
CSS 类 |
|
变量 |
描述 |
|
小组件的背景颜色(复选框和单选按钮不起作用) |
|
小组件的边框颜色 |
|
小组件的边框大小 |
|
小组件的边框半径 |
|
小组件的边框类型 |
|
小组件边框的焦点类型 |
|
小组件的合并边框样式 |
|
小组件内文本的颜色 |
|
小组件内的文本大小 |
|
小组件的CSS行高属性 |
|
小组件的CSS内边距属性 |
|
小组件聚焦时的边框颜色 |
|
用于必填字段的小组件的边框颜色 |
|
必填字段小组件的背景颜色 |
|
禁用字段时小组件的背景颜色 |
|
禁用字段时小组件的字体颜色 |
|
禁用字段时小组件的边框颜色 |
|
小组件的高度(不适用于复选框和单选按钮) |
|
复选框和单选按钮的高度。 |
|
多选下拉菜单的最大高度 |
焦点、必填和禁用字段的样式使用变量进行限制。 但是,您可以通过覆盖样式来更改样式。 提供使用变量的限制主要是为了保持对变量数的检查。 如果字段的外观发生显着变化,则可以放松限制,因为它位于前面讨论的任何状态中。
作者可以使用短说明和长说明组件在字段中指定帮助内容。 两个组件都有一个通用类 .guideHelpDescription
另一个课 .long
/ .short
,具体取决于描述类型。 “帮助”内容将包含在段落元素中,以覆盖描述的样式。 帮助描述(长和短)将使用以widgetshelp开头的变量进行修改,如下表所述:
变量 |
描述 |
|
小组件的长帮助的背景颜色 |
|
小组件的边框颜色长帮助 |
|
小组件的左指示器边框颜色的长帮助 |
|
小组件的简短帮助的背景颜色 |
|
小组件的字体颜色简短帮助 |
|
小组件的短工具提示的背景颜色帮助 |
|
小组件的短工具提示的字体颜色帮助 |
条款和条件(TnC)
)小组件可让您指定条款和条件。 您可以使用下表所述的变量自定义小组件。
变量 |
描述 |
tnc-unvisited |
未访问的tnc链接的字体颜色。 |
tnc-visited |
访问的tnc链接的字体颜色。 |
按钮也是小组件。 但是,其样式与小组件略有不同。 在自适应表单中,以下任一选项都构成按钮:
HTML按钮代码:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS 类 |
描述 |
|
提供按钮的图标 |
|
“样式”按钮标签/标题 |
变量 |
描述 |
|
按钮的边框大小 |
|
边框类型 |
|
按钮的CSS内边距属性 |
|
按钮的字体大小 |
|
按钮的背景颜色 |
|
按钮的字体颜色 |
|
按钮的边框颜色 |
|
大按钮的内边距(具有类.buttonlarge的按钮) |
|
大按钮的字体大小 |
|
小按钮的内边距(具有类.buttonsmall的按钮) |
|
小按钮的字体大小 |
|
用于提供信息的按钮的背景颜色(具有类.buttoninformative的按钮) |
|
用于提供信息的按钮的字体颜色 |
|
用于提供信息的按钮的边框颜色 |
|
警告样式化按钮的背景颜色(具有类.buttonwarning的按钮) |
|
警告样式化按钮的字体颜色 |
|
警告样式化按钮的边框颜色 |
|
警报按钮的背景颜色(具有类.buttonalert的按钮) |
|
警报按钮的字体颜色 |
|
警报按钮的边框颜色 |
对于小组件,当作者在帮助内容中添加长描述时,将显示问号。 将使用引导中提供的默认图标。 要使用自定义图标,可以自定义引导图标。
CSS 类 |
|
变量 |
描述 |
|
图标的颜色 |
|
将鼠标悬停在图标上方时图标的颜色 |
您可以使用以下变量更改表中标题行和正文行的颜色主题。
变量 |
描述 |
|
标题行的背景颜色。 默认值为 |
|
奇数主体行的背景颜色。 默认值为 |
|
偶数主体行的背景颜色。 默认值为 |
自适应表单的文件附件小组件允许您上传文件。 您还可以使用变量自定义小组件。
变量 |
描述 |
|
小组件中显示的文件的边距 |
|
文件项的背景颜色 |
|
上边框的边框颜色 |
|
文件项的字体颜色 |
|
小组件中“预览”图标(Bootstrap图标)的颜色 |
|
文件项的注释高度 |
有四种类型的导航器选项卡。 这些选项卡包括向导和折叠面板中左侧、顶部的选项卡。 每个导航器都有一个不同的类。
导航器 |
CSS 类 |
|
.accordion-navigators |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.向导 — 导航器 |
以下是选项卡导航器元素的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 类 |
描述 |
|
具有嵌套/子/子导航器的选项卡导航器(左侧和顶部) |
|
没有嵌套/子/子导航器的选项卡导航器(左侧和顶部) |
guideNavIcon类为选项卡导航器(左上方)和向导导航器提供了默认图标。
CSS 类 |
|
在创作中,通过在面板上提供CSS类(表单示例),可以更改特定导航器的图标 <class_name>. 添加 <class_name>_nav 的上界。
变量 |
描述 |
选项卡导航器 |
|
|
整个选项卡导航器的背景颜色 |
|
选项卡的背景颜色 |
|
选项卡的字体颜色 |
|
悬停时选项卡的背景颜色 |
|
悬停时选项卡的字体颜色 |
|
面板聚焦时的背景颜色(活动) |
|
面板聚焦时的字体颜色 |
|
面板的完成表达式返回true时的背景颜色 |
|
面板的完成表达式返回true时的字体颜色 |
|
面板聚焦一次但完成表达式返回false时的背景颜色 |
|
当面板聚焦一次但完成表达式返回false时,字体颜色 |
|
选项卡的边框颜色 |
|
选项卡的字体大小 |
|
选项卡的内边距 |
|
选项卡的边距 |
|
垂直选项卡的边距 |
|
选项卡的边框大小 |
|
选项卡的最小高度 |
|
嵌套选项卡的缩进 |
向导导航器 |
|
|
整个向导导航器的背景颜色 |
|
向导的背景颜色 |
|
向导的字体颜色 |
|
面板聚焦时的背景颜色(活动) |
|
面板聚焦时的字体颜色(聚焦) |
|
面板的完成表达式返回true时的背景颜色 |
|
面板的完成表达式返回true时的字体颜色 |
|
面板聚焦一次但完成表达式返回false时的背景颜色 |
|
面板聚焦一次但完成表达式返回false时的字体颜色 |
|
向导的颜色 |
|
向导的字体大小 |
|
向导的内边距 |
|
向导的边框大小 |
|
向导导航器项目符号的边框颜色(在标题/标签前添加前缀) |
|
向导导航器进度栏的背景颜色 |
|
进度条的填充颜色 |
折叠导航器 |
|
|
折叠面板的内边距 |
面板包括可选工具栏及其内容。
CSS 类 |
|
变量 |
描述 |
|
面板的背景颜色 |
|
面板文本的字体大小 |
|
面板文本的字体颜色 |
|
面板内边距 |
|
面板描述的字体大小 |
|
面板描述的内边距 |
|
面板帮助的背景颜色 |
|
面板帮助的指示器边框颜色 |
面板节点分为导航器和内容。 那里
不是内容的单独样式组件。 描述的变量将应用于导航器和内容。
(&A);最顶部的面板(RootPanel)没有此类。
这些变量会影响在移动设备或包含面板标题以及下一和后导航器的小屏幕设备上可见的标题栏。
CSS 类 |
|
变量 |
描述 |
|
标题栏的背景颜色 |
|
标题栏中文本的字体颜色 |
|
标题栏的内边距 |
这些变量会影响滚动指示器,该指示器是在移动设备或小屏幕设备上显示的橙色箭头。 滚动指示器指示屏幕的可见部分以外有内容。 您可以向下滚动以查看。 点击内容的结尾时,箭头会消失。
CSS 类 |
|
变量 |
描述 |
|
从底部滚动的固定位置 |
|
从右起的滚动器的固定位置 |
|
滚动条宽度 |
|
阴划器高度 |
下表中的这些变量会影响移动设备固定工具栏布局。
CSS 类 |
|
变量 |
描述 |
|
固定了工具栏在移动设备上的底部位置 |
|
修复了工具栏在移动设备上从顶部的位置 |
|
修复了工具栏在移动设备上左侧的位置 |
|
修复了工具栏在移动设备上右侧的位置 |
|
修复了工具栏按钮图标(从顶部)的位置 |
|
移动设备上工具栏按钮图标的宽度 |
|
移动设备上工具栏按钮图标的高度 |
|
移动设备上工具栏的背景颜色 |