HT for Web 风格手册

索引


概述

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.Color是为简化颜色主题自定义而抽象的一组颜色属性集,HT系统中所有颜色都取之于这组颜色集, 每个属性对应一到多个ht.Defaultht.Style或预定义矢量图片中的具体属性。

ht.Default.listViewSelectBackgroundht.Default.treeViewSelectBackground初始值都由ht.Color.highlight值决定的,因此:

以下是ht.Color每个颜色对应的具体属性

ht.Default

ht.Default定义了所有组件的默认参数值,命名规范以组件名+属性名的结合方式,例如树组件TreeView的行线是否显示属性rowLineVisible, 该属性的默认值定义在ht.Default.treeViewRowLineVisible上,因此可通过treeView.setRowLineVisible(true)改变具体组件实例, 也可通过配置ht.Default.treeViewRowLineVisible属性达到全局修改所有TreeView实例的效果。

ht.Default中出了定义了默认参数外,还包含很多工具函数,以下例子是对所有属性参数,以及工具函数使用的描述说明:

ht.Style

ht.Style定义了所有在GraphViewGraph3dView组件上显示的图元的style默认属性,创建NodeEdge这些图元实例对象时, 其对象自身的style属性为空,调用getStyle(name)函数时,如果该属性未设置,则HT会通过ht.Style的全局定义的默认值获取信息, 如果通过setStyle(name, value)的方式设置了具体对象属性后,getStyle(name)则会返回具体被设置的属性信息。

以下为ht.Style所有预定义的参数属性描述说明:


欢迎交流 service@hightopo.com