Question

有没有人能解决我的问题？我的树组件中的项目需要更多图标。

图标对于传达项目的节点类型很有用，但我需要表达其状态或其他属性。
如果Tree有像addItemIcon或addItemOverlayIcon这样的方法，那将是理想的。

谢谢你的建议。

Answer 1

您可以为项目设置图标：

Tree tree = new Tree();
tree.addItem("MyItem");
tree.setItemIcon("MyItem", FontAwesome.ADJUST);

如果FontAwesome中没有足够的图标，您可以始终映射您自己的或其他图标集（作为资源）。

添加更多图标内联的一个选项是添加ItemStyleGenerator：你在哪里引用了itemId，你想在哪里添加css样式（进入类属性）。

tree.setItemStyleGenerator(new ItemStyleGenerator()
{
    @Override
    public String getStyle(Tree source, Object itemId)
    {
        return " fa fa-road";
    }
});

然后你必须使用自己的CSS（将类字体图标映射到类选择器并使用理想的css属性的大小和颜色）来设置它，它应该看起来像这样：

.fa .fa-road span:BEFORE{
    font-family: FontAwesome;
    content: '\f018';
}

Answer 2

受到zigc启发的Beeing，我尝试了另一种解决方案。只需设置

.v-tree-node-MyTree{font-family: FontAwesome, Arial}

然后我可以将FontAwesome中的特殊字符直接包含在标题文本中，开头，结尾或中间的任何一个。不支持（不包含在FontAwesome中）字符以第二种字体显示。

在开头或标题上有两个以上图标的示例：

int codePoint[]={FontAwesome.HOME.getCodepoint(),FontAwesome.ROAD.getCodepoint()};
tree.setItemCaption(itemId, new String(codePoint,0,2)+nodeName);

Vaadin Tree：叠加或更多图标

2 个答案: