【新特性速遞】智能樹控件支持顯示文本了!

下個版本(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

相關文章
相關標籤/搜索