2014-10-09 6 views
1

У кого-нибудь есть решение для моей проблемы? Мне нужно больше значков для элементов в моем компоненте Tree.

Иконки полезны для передачи типа узла элемента, но мне нужно выразить его статус или другие свойства.
Было бы идеально, если бы у Дерева были методы, такие как addItemIcon или addItemOverlayIcon.

Спасибо за советы.Vaadin Tree: Наложение или другие значки

ответ

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'; 
} 
+0

я могу использовать один значок, но возникает вопрос: Как добавить два или более значков одного дерева элемента. Рядом с каждым (до заголовка) или с помощью наложения на одно и то же место с прозрачностью. – Hink

+0

Спасибо, это достаточно решение. Кроме того, он может быть обогащен цветами. – Hink

0

неоспоримых вдохновленный zigc, я попробовал другое решение. Просто установите

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

Затем я могу включать в себя специальные символы из FontAwesome непосредственно в подписи-текст, в начале, в конце или anywehere в середине. Неподдерживаемые (не включены в FontAwesome) символы отображаются со вторым шрифтом.

Пример еще с двумя иконками в начале или надписи:

int codePoint[]={FontAwesome.HOME.getCodepoint(),FontAwesome.ROAD.getCodepoint()}; 
tree.setItemCaption(itemId, new String(codePoint,0,2)+nodeName); 
Смежные вопросы