Index
The HT for Web
defaults to a holistic style effect that maintains consistent color, size, and operating habits in a variety of components, but user-specific needs are tailored to suit the needs of different projects or industries.
Changing the default properties in HT
system requires that the only read htconfig
configuration information at initialization time through a global htconfig
variable name, so the attribute must be initialized before introducing the ht.js
package, modifying htconfig
when running the variable does not work again, the sample code is as follows:
<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>
Configurable parameters are grouped into three broad categories:
ht.Color
object propertiesGraphView
and Graph3dView
components, and eventually set to ht.Style
object propertiesht.Color
is a set of color attribute set that is abstracted for the simplification of color themes, and all colors in the HT
system are taken from this color set, every attribute corresponds to one or more ht.Default
, ht.Style
or specific attributes in a predefined vector picture.
ht.Default.listViewSelectBackground
and ht.Default.treeViewSelectBackground
initial value is decide by ht.Color.highlight
, so:
ht.Color.highlight
value to change the selected colors for all list and tree componentsht.Default.listViewSelectBackground
value to change the selected color of all list componentsht.Default.treeViewSelectBackground
value to change the selected color of all tree componentslistView.setSelectBackground('blue')
to change the selected color of a specific List Component objecttreeView.setSelectBackground('blue')
to change the selection of specific tree component objectsHere's the ht.Color
specific properties for each 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
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
type data icon
and image
correspond to vector graphic background color
imageGradient
Data
type data icon
and image
correspond to vector graphic progressive shade
chart
Chart default array of colors
ht.Default
defines the defaults for all components, and the naming convention is combined with the component name and property name, such as whether the line of the tree component TreeView
displays the property rowLineVisible
, and the default value of the attribute is defined in ht.Default.treeViewRowLineVisible
, so you can change the specific component instance through the treeView.setRowLineVisible(true)
or configure ht.Default.treeViewRowLineVisible
property achieves the effect of globally modifying all TreeView
instances.
ht.Default
is defined in addition to the default parameters, it also have a number of tool functions, and the following examples are descriptions of all property parameters and the use of tool functions:
ht.Style
defines the style
default properties of all datas displayed on the GraphView
and Graph3dView
components, while creating Node
and Edge
of these data instance objects whose own style
properties are empty, or while calling getStyle(name)
function, if the property is not be set, the HT
will gets information through the default value which is global definition in ht.Style
, and if the specific object property is set by means of setStyle(name, value)
, getStyle(name)
will returns the property information that is specifically set.
The following is ht.Style
all predefined parameter attributes description: