了解CSS和LESS框架。
文章列表公开的自适应表单的css类。 您可以利用这些类来设计自适应表单的各个组件的样式。 创作组件的样式(如显示警告的对话框和状态栏)超出本文的范围。 仅当无法使用主题编辑器设置组件样式时,使用这些样式构造创建样式(使用CSS或更少)。
LESS框架简化了自适应表单样式的使用案例。 该框架允许您使用一组变量和函数(混合)定义样式。 LESS框架有助于减小捆绑代码的大小并增加其可重用性。
可以通过以下方式自定义自适应表单样式:
您可以更改自适应表单的主题以确保其外观与嵌入自适应表单的网页保持一致。
使用CSS属性对自适应表单的整体外观进行更改通常是主题更改的一部分。 对“自适应表单的确定和感觉”这个选项所做的重大更改(如组件布局和位置的更改)不会被视为主题更改。
根据引导,以下CSS属性集定义网页的主题:
目前,LESS变量仅为自适应表单中各个元素的这些属性定义。
您可以更改元素的外观、布局、位置和可见性。 要实现此任务,请创建或更新自定义。css文件,以包含本文中列出的样式构造。
要将样式应用于自适应表单,请在中打开自适应表单进行编辑,打开自适应表单容器的属性,在基本选项卡中指定自定义CSS文件的路径。 自适应表单的默认样式构造,并由自定义。css文件中列出的构造覆盖。
本文中讨论的组件有其预定义的CSS类。 您可以编辑变量以修改CSS类中的样式。 或者,也可以重写整个类。 本节介绍组件和样式中的类,您可以使用变量修改这些类。
容器是顶级组件。 其他面板和字段位于容器组件下。
CSS 类 |
|
变量描述 |
变量描述 |
|
容器的背景颜色 |
|
容器的填充 |
|
容器边距 |
|
容器的字体颜色 |
自适应表单包括各种类型的字段。 每个字段都有一个唯一的类名,即字段的名称。 该字段还具有公用类名guideFieldNode
。
字段包括标签、构件、帮助说明(长说明和短说明)和字段帮助图标(问号)。
CSS 类 |
|
变量 |
描述 |
|
字段的填充 |
|
字段错误消息的字体颜色 |
|
字段错误消息的字体大小 |
用于字段的HTML元素label包括类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的按钮) |
|
警报按钮的字体颜色 |
|
警报按钮的边框颜色 |
对于构件,当作者在“帮助”内容中添加详细说明时,将显示questionMark。 使用引导中提供的默认图标。 要使用自定义图标,可以自定义引导图标。
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 类 |
|
变量 |
描述 |
|
面板的背景颜色 |
|
面板文本的字体大小 |
|
面板文本的字体颜色 |
|
面板内填充 |
|
面板说明的字体大小 |
|
面板说明的填充 |
|
面板帮助的背景颜色 |
|
面板帮助的指示器边框颜色 |
面板节点被分为导航器和内容。
没有单独的内容样式组件。 描述的变量应用于导航器和内容。
&ast;最顶部的面板(RootPanel)没有此类。
这些变量会影响在移动设备或小屏幕设备上可见的标题栏,这些设备包含面板标题以及后面和后面的导航器。
CSS 类 |
|
变量 |
描述 |
|
标题栏的背景颜色 |
|
标题栏中文本的字体颜色 |
|
标题栏的填充 |
这些变量影响滚动指示器,该指示器是在移动设备或小屏幕设备上显示的橙色箭头。 “滚动”指示符指示屏幕的可见部分之外有内容。 您可以向下滚动以查看它。 点击内容结尾时,箭头消失。
CSS 类 |
|
变量 |
描述 |
|
从底部固定滚动条的位置 |
|
从右侧固定滚动条的位置 |
|
滚动条宽度 |
|
滚动条高度 |
下表中的这些变量会影响移动固定工具栏布局。
CSS 类 |
|
变量 |
描述 |
|
固定工具栏在移动设备上的底部位置 |
|
修复了工具栏在移动设备上的顶部位置 |
|
在移动设备上从左侧修复工具栏的位置 |
|
固定工具栏在移动设备上的右侧位置 |
|
从顶部修复工具栏按钮图标的位置 |
|
移动设备上工具栏按钮图标的宽度 |
|
移动设备上工具栏按钮图标的高度 |
|
移动设备上工具栏的背景颜色 |