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.accordionViewSelectBackgroundht.Default.propertyViewSelectBackgroundht.Default.listViewSelectBackgroundht.Default.treeViewSelectBackgroundht.Default.tableViewSelectBackgroundht.Default.treeTableViewSelectBackgroundht.Default.tableHeaderInsertColorht.Default.tabViewSelectBackgroundht.Default.tabViewInsertColorht.Default.toolbarSelectBackgroundht.Default.buttonSelectBackgroundht.Default.comboBoxSelectBackgroundht.Default.propertyPaneSelectBackground
label
ht.Default.labelColorht.Default.toolbarLabelColorht.Style['label.color']ht.Style['label2.color']ht.Default.propertyViewLabelColorht.Default.listViewLabelColorht.Default.treeViewLabelColorht.Default.tableViewLabelColorht.Default.treeTableViewLabelColorht.Default.tableHeaderLabelColorht.Default.toolbarLabelColor ht.Default.textFieldColorht.Default.textAreaColorht.Default.radioButtonLabelColorht.Default.checkBoxLabelColorht.Default.buttonLabelColorht.Default.comboBoxLabelColorht.Default.formPaneLabelColor ht.Default.propertyPaneHeaderLabelColor
labelSelectColor
ht.Style['note.color']ht.Style['note2.color']ht.Style['group.title.color']ht.Default.accordionViewLabelColorht.Default.propertyViewLabelSelectColorht.Default.listViewLabelSelectColorht.Default.treeViewLabelSelectColorht.Default.tableViewLabelSelectColorht.Default.treeTableViewLabelSelectColorht.Default.tabViewLabelColorht.Default.toolbarLabelSelectColorht.Default.buttonLabelSelectColorht.Default.comboBoxLabelSelectColor
transparent
ht.Default.scrollBarColorht.Default.toolTipShadowColorht.Default.tableHeaderMoveBackgroundht.Default.tabViewMoveBackgroundht.Default.overviewMaskBackgroundht.Default.comboBoxShadowColor
titleBackground
ht.Default.accordionViewTitleBackgroundht.Default.splitViewDividerBackgroundht.Default.tabViewTabBackground
titleIconBackground
ht.Default.accordionViewExpandIconht.Default.accordionViewCollapseIcon
headerBackground
ht.Default.propertyViewBackgroundht.Default.tableHeaderBackgroundht.Default.toolbarBackgroundht.Default.propertyPaneHeaderBackground
headerIconBackground
ht.Default.propertyViewExpandIconht.Default.propertyViewCollapseIconht.Default.tableHeaderSortDescIconht.Default.tableHeaderSortAscIcon
headerSeparator
ht.Default.toolbarSeparatorColor
headerLine
ht.Default.tableHeaderColumnLineColor
background
ht.Default.overviewContentBackgroundht.Default.comboBoxBackground
disabledBackground
ht.Default.disabledBackground
toolTipBackground
ht.Default.toolTipBackground
rectSelectBorder
ht.Default.graphViewRectSelectBorderColor
rectSelectBackground
ht.Default.graphViewRectSelectBackgroundht.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.treeViewExpandIcontreeViewCollapseIcontreeTableViewExpandIcontreeTableViewCollapseIcon
contentLine
ht.Default.propertyViewRowLineColorht.Default.propertyViewColumnLineColorht.Default.listViewRowLineColorht.Default.treeViewRowLineColorht.Default.tableViewRowLineColorht.Default.tableViewColumnLineColorht.Default.treeTableViewRowLineColorht.Default.treeTableViewColumnLineColor
widgetBackground
ht.Default.buttonBackgroundht.Default.sliderButtonht.Default.overviewBackground
widgetBorder
ht.Default.textFieldBorderColorht.Default.textAreaBorderColorht.Default.radioButtonPressBackgroundht.Default.checkBoxPressBackgroundht.Default.buttonBorderColorht.Default.comboBoxBorderColorht.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: