Как изменить цвет ui-значка в PrimeFaces?

Question

Я разрабатываю приложение Java Java с JSF 2.2 и PrimeFaces 6.0. Я создаю p:tree, и я хотел бы изменить цвет ui-значков, например, на следующем рисунке (текст цензурирует).

Мой XHTML код:

<p:tree value="#{docBean.root}" var="doc"> 
    <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"> 
     <h:outputText value="#{doc.name}" /> 
    </p:treeNode> 
</p:tree> 

Я попытался с ...

.ui-icon-folder-open{ 
    color: red; 
} 

... но только фон значок меняется на красный.

Спасибо!

Answer 1

Для меня самым гибким и простым решением является использование шрифтов «удивительных» значков для узлов. Они не являются фактически значками, но, как говорится в названии, шрифты. Таким образом, эти могут быть изменены css. Отсюда их популярность и почему они также являются included in PrimeFaces

PrimeFaces showcase for tree with icons показывает, что вы можете добавлять пользовательские значки для узлов, как открытых, так и закрытых, а также для листьев. К счастью, все, что вы добавляете в соответствующие атрибуты на клиентской стороне, заканчивается атрибутами «class» в html И вы можете добавить несколько значений пробела в атрибутах. Это то, что нужно для шрифтов, поэтому, добавив expandedIcon="fa fa-folder-open" или collapsedIcon="fa fa-folder", вы можете получить нужные значки и по умолчанию по умолчанию .fa { color: orange} вы получите именно то, что хотите.

В полном примере с измененными листьями будет что-то вроде этого:

<style> 

    .fa { 
     color: orange; 
    } 

</style> 
<h:form> 
    <p:tree value="#{treeIconView.root}" var="doc"> 
     <p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder"> 
      <h:outputText value="#{doc.name}"/> 
     </p:treeNode> 

     <p:treeNode type="document" icon="fa fa-file-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="picture" icon="fa fa-file-picture-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="mp3" icon="fa fa-file-video-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 
    </p:tree> 
</h:form> 

Но вы можете пойти гораздо дальше. Посмотрите на следующее изображение:

Он производится на следующем примере:

<style> 

    .fa { 
     color: orange; 
    } 

    .videoColor { 
     color: blue; 
    } 

    .colorOpen { 
     color: green; 
    } 

    .fa-file-picture-o { 
     color: purple; 
    } 

    .color30KB { 
     color: red; 
    } 

</style> 
<h:form> 
    <p:tree value="#{treeIconView.root}" var="doc"> 
     <p:treeNode expandedIcon="fa fa-folder-open colorOpen" collapsedIcon="fa fa-folder"> 
      <h:outputText value="#{doc.name}"/> 
     </p:treeNode> 

     <p:treeNode type="document" icon="fa fa-file-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="picture" icon="fa fa-file-picture-o #{doc.size == '30 KB' ? 'color30KB' : '' }"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="mp3" icon="fa fa-file-video-o videoColor"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 
    </p:tree> 
</h:form> 

Вы можете добавить дополнительные «классы» в атрибуты значок, но вы также можете использовать классы fÀ которые уже добавлены и используются в селекторах css, или вы можете добавлять определенные условные «классы» в значки на основе значений и т. д. И поскольку все это может быть изменено css, вы можете не только изменить цвет, но и размер, вращение, анимация css или что-то еще.