【新特性速递】智能树控件支持显示文本了!

下个版本(v6.0.0),智能树控件启用微型模式时能够显示文本了。css

经过下面两幅图片直观的对比显示效果的差异。spa

不显示文本:3d

 

显示文本:code

 

 

能够看到显示文本时须要占据更多的空间,可是对用户更加友好,能够直观的判断每一个图标的含义。blog

默认官网示例仍是不显示文本,若是想启用文本显示,只需转到index.css文件,添加以下CSS规则便可:图片

.f-tree-minimode-list .f-tree-minimode-icon {
    font-size: 24px;
    min-width: 24px;
    line-height: 24px !important;
}
.f-tree-minimode-list .f-tree-minimode-icon.f-tree-custom-icon {
    height: 24px !important;
}
.f-tree-minimode-list .f-tree-minimode-text {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

其中:!important 规则是为了在不一样显示模式下有相同的视觉效果。固然你也能够自行添加不一样显示模式(DisplayMode)下的CSS规则,使得图标在不一样显示模式下的大小不同。ci

 

不忘初心,砥砺前行!get

相关文章
相关标签/搜索