字体Webix树节点的Awesome图标 [英] Font Awesome icons for Webix tree nodes

问题描述

Webix与Font Awesome 集成。但是如何使用Font Awesome图标而不是树中的默认文件夹/文件图标来对单个节点进行风格？

这是我试过的：

http://webix.com/snippet/52251623 p>

• 模板只能在树级使用


• $ css 保留现有的文件夹/文件图标


• 有无图标为树记录的属性，但设置一个会做某事...它更改文件夹图标

对于单树， like next

  webix.ui（{
 view：tree，
 type：{
 folder：function（obj）{
 if（obj。$ count）
 return< span class ='webix_icon fa-folder'>< / span>; 
 return< span class ='webix_icon fa-file'>< / span>; 
} 
}，
 data：tree_data 
}）
  

您可以在这里查看范例 - http://webix.com/snippet/0f3d85c3

如果要在多个树控件之间共享此行为，可以一次定义自定义类型

  webix.ui.tree，{
 name：awesome，
文件夹：function（obj）{
 if（obj。$ count）
 return < span class ='webix_icon fa-folder'>< / span>; 
 return< span class ='webix_icon fa-file'>< / span>; 
 } 
}）; 
  

以后使用类型：awesome应用样式

  webix.ui（{
 view：tree，
 type：awesome，
 data：tree_data 
}）
  

示例 - http://webix.com/snippet/79dbe741

Webix integrates with Font Awesome. But how can Font Awesome icons be used instead of the default folder/file icons in trees to style individual nodes?

Here's what I've tried:

http://webix.com/snippet/52251623

• template only works at the tree level
• $css keeps the existing folder/file icon
• there is no icon property documented for trees, yet setting one does something... it changes the folder icon into a file one, when the node has children.

解决方案

For single tree it will be like next

webix.ui({
  view:"tree",
  type:{
    folder:function(obj){
      if (obj.$count)
        return "<span class='webix_icon fa-folder'></span>";
      return  "<span class='webix_icon fa-file'></span>";
    }
  },
  data:tree_data
})

You can check the sample here - http://webix.com/snippet/0f3d85c3

If you want to share this behavior among multiple tree controls, you can define the custom type once

webix.type(webix.ui.tree, {
  name:"awesome",
  folder:function(obj){
      if (obj.$count)
        return "<span class='webix_icon fa-folder'></span>";
      return  "<span class='webix_icon fa-file'></span>";
    }
});

and later use type:"awesome" to apply the styling

webix.ui({
  view:"tree",
  type:"awesome",
  data:tree_data
})

Example - http://webix.com/snippet/79dbe741

这篇关于字体Webix树节点的Awesome图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！