索引
HT for Web
默认具有一套整体性的风格效果,在各种组件中保持一致的颜色,尺寸和操作习惯,
但用户客户根据具体使用需要进行定制,改变风格以适应不同项目或行业的效果需求。
改变HT
系统默认属性,需要通过全局的htconfig
变量名指定,HT
系统只在初始化时读取htconfig
的配置信息,
因此该属性必须在引入ht.js
包之前初始化好,运行状态时修改htconfig
变量不会再起作用,示例代码如下:
<script>
htconfig = {
Color: {
label: '#000',
highlight: '#1ABC9C',
},
Default: {
toolTipDelay: 100,
toolTipContinual: true
},
Style: {
'select.color': '#E74C3C',
'select.width': 3
}
};
</script>
<script src="ht.js"></script>
可配置的参数分为三大类:
ht.Color
对象属性上ht.Default
对象属性上GraphView
和Graph3dView
组件上图元的默认参数,最终设置到ht.Style
对象属性上ht.Color
是为简化颜色主题自定义而抽象的一组颜色属性集,HT
系统中所有颜色都取之于这组颜色集,
每个属性对应一到多个ht.Default
,ht.Style
或预定义矢量图片中的具体属性。
ht.Default.listViewSelectBackground
和ht.Default.treeViewSelectBackground
初始值都由ht.Color.highlight
值决定的,因此:
ht.Color.highlight
值,可改变所有列表和树组件的选中颜色ht.Default.listViewSelectBackground
值,可改变所有列表组件的选中颜色ht.Default.treeViewSelectBackground
值,可改变所有树组件的选中颜色listView.setSelectBackground('blue')
,可改变具体列表组件对象的选中颜色treeView.setSelectBackground('blue')
,可改变具体树组件对象的选中颜色以下是ht.Color
每个颜色对应的具体属性
highlight
ht.Style['select.color']
ht.Style['note.background']
ht.Style['note2.background']
ht.Default.accordionViewSelectBackground
ht.Default.propertyViewSelectBackground
ht.Default.listViewSelectBackground
ht.Default.treeViewSelectBackground
ht.Default.tableViewSelectBackground
ht.Default.treeTableViewSelectBackground
ht.Default.tableHeaderInsertColor
ht.Default.tabViewSelectBackground
ht.Default.tabViewInsertColor
ht.Default.toolbarSelectBackground
ht.Default.buttonSelectBackground
ht.Default.comboBoxSelectBackground
ht.Default.propertyPaneSelectBackground
label
ht.Default.labelColor
ht.Default.toolbarLabelColor
ht.Style['label.color']
ht.Style['label2.color']
ht.Default.propertyViewLabelColor
ht.Default.listViewLabelColor
ht.Default.treeViewLabelColor
ht.Default.tableViewLabelColor
ht.Default.treeTableViewLabelColor
ht.Default.tableHeaderLabelColor
ht.Default.toolbarLabelColor
ht.Default.textFieldColor
ht.Default.textAreaColor
ht.Default.radioButtonLabelColor
ht.Default.checkBoxLabelColor
ht.Default.buttonLabelColor
ht.Default.comboBoxLabelColor
ht.Default.formPaneLabelColor
ht.Default.propertyPaneHeaderLabelColor
labelSelectColor
ht.Style['note.color']
ht.Style['note2.color']
ht.Style['group.title.color']
ht.Default.accordionViewLabelColor
ht.Default.propertyViewLabelSelectColor
ht.Default.listViewLabelSelectColor
ht.Default.treeViewLabelSelectColor
ht.Default.tableViewLabelSelectColor
ht.Default.treeTableViewLabelSelectColor
ht.Default.tabViewLabelColor
ht.Default.toolbarLabelSelectColor
ht.Default.buttonLabelSelectColor
ht.Default.comboBoxLabelSelectColor
transparent
ht.Default.scrollBarColor
ht.Default.toolTipShadowColor
ht.Default.tableHeaderMoveBackground
ht.Default.tabViewMoveBackground
ht.Default.overviewMaskBackground
ht.Default.comboBoxShadowColor
titleBackground
ht.Default.accordionViewTitleBackground
ht.Default.splitViewDividerBackground
ht.Default.tabViewTabBackground
titleIconBackground
ht.Default.accordionViewExpandIcon
矢量图标背景色ht.Default.accordionViewCollapseIcon
矢量图标背景色
headerBackground
ht.Default.propertyViewBackground
ht.Default.tableHeaderBackground
ht.Default.toolbarBackground
ht.Default.propertyPaneHeaderBackground
headerIconBackground
ht.Default.propertyViewExpandIcon
矢量图标背景色ht.Default.propertyViewCollapseIcon
矢量图标背景色ht.Default.tableHeaderSortDescIcon
矢量图标背景色ht.Default.tableHeaderSortAscIcon
矢量图标背景色
headerSeparator
ht.Default.toolbarSeparatorColor
headerLine
ht.Default.tableHeaderColumnLineColor
background
ht.Default.overviewContentBackground
ht.Default.comboBoxBackground
ht.Default.dialogContentBackground
disabledBackground
ht.Default.disabledBackground
toolTipBackground
ht.Default.toolTipBackground
rectSelectBorder
ht.Default.graphViewRectSelectBorderColor
rectSelectBackground
ht.Default.graphViewRectSelectBackground
ht.Default.graph3dViewRectSelectBackground
editPointBorder
ht.Default.graphViewEditPointBorderColor
editPointBackground
ht.Default.graphViewEditPointBackground
dash
ht.Style['shape.dash.color']
ht.Style['edge.dash.color']
groupBackground
ht.Style['group.background']
groupTitleBackground
ht.Style['group.title.background']
gridBackground
ht.Style['grid.background']
reverse
ht.Style['label.reverse.color']
ht.Style['label2.reverse.color']
ht.Style['note.reverse.color']
ht.Style['note2.reverse.color']
ht.Style['shape3d.reverse.color']
ht.Style['all.reverse.color']
contentIconBackground
ht.Default.treeViewExpandIcon
矢量图标背景色treeViewCollapseIcon
矢量图标背景色treeTableViewExpandIcon
矢量图标背景色treeTableViewCollapseIcon
矢量图标背景色
contentLine
ht.Default.propertyViewRowLineColor
ht.Default.propertyViewColumnLineColor
ht.Default.listViewRowLineColor
ht.Default.treeViewRowLineColor
ht.Default.tableViewRowLineColor
ht.Default.tableViewColumnLineColor
ht.Default.treeTableViewRowLineColor
ht.Default.treeTableViewColumnLineColor
widgetBackground
ht.Default.buttonBackground
ht.Default.sliderButton
矢量图标背景色ht.Default.overviewBackground
widgetBorder
ht.Default.textFieldBorderColor
ht.Default.textAreaBorderColor
ht.Default.radioButtonPressBackground
ht.Default.checkBoxPressBackground
ht.Default.buttonBorderColor
ht.Default.comboBoxBorderColor
ht.Default.overviewContentBorderColor
widgetIconBackground
widget
组件相关矢量图标背景色
widgetIconBorder
widget
组件相关矢量图标边框颜色
widgetIconGradient
widget
组件相关矢量图标渐进色
widgetIconHighlight
widget
组件相关矢量图标高亮色,一般用于表示选中状态
imageBackground
Data
类型图元icon
和image
对应矢量图片背景色
imageGradient
Data
类型图元icon
和image
对应矢量图片渐进色
chart
图表默认颜色数组
ht.Default
定义了所有组件的默认参数值,命名规范以组件名+属性名的结合方式,例如树组件TreeView
的行线是否显示属性rowLineVisible
,
该属性的默认值定义在ht.Default.treeViewRowLineVisible
上,因此可通过treeView.setRowLineVisible(true)
改变具体组件实例,
也可通过配置ht.Default.treeViewRowLineVisible
属性达到全局修改所有TreeView
实例的效果。
ht.Default
中出了定义了默认参数外,还包含很多工具函数,以下例子是对所有属性参数,以及工具函数使用的描述说明:
ht.Style
定义了所有在GraphView
和Graph3dView
组件上显示的图元的style
默认属性,创建Node
和Edge
这些图元实例对象时,
其对象自身的style
属性为空,调用getStyle(name)
函数时,如果该属性未设置,则HT
会通过ht.Style
的全局定义的默认值获取信息,
如果通过setStyle(name, value)
的方式设置了具体对象属性后,getStyle(name)
则会返回具体被设置的属性信息。
以下为ht.Style
所有预定义的参数属性描述说明: