如何在PrimeFaces中更改ui-icon的颜色？ [英] How can to change ui-icon's color in PrimeFaces?
问题描述
我正在使用JSF 2.2和PrimeFaces 6.0开发Web Java应用程序。我正在构建一个 p：tree ，我想更改ui-icons颜色，例如，在下一张图片中（文本是审查）。
我的xhtml代码为：
< p：tree value =＃{docBean.root}var =doc>
< p：treeNode expandedIcon =ui-icon-folder-opencollapsedIcon =ui-icon-folder-collapsed>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< / p：tree>
我试过......
.ui-icon-folder-open {
color：red;
}
...但正好的图标背景变为红色。
谢谢！
对我而言，最灵活，最简单的解决方案就是使用font-awesome'icons'用于节点。它们不是有效的图标，但正如名称所述，字体。所以这些可以由css改变。因此他们的受欢迎程度以及为什么他们也
在更改叶子的完整示例中，如下所示：
< style>
.fa {
颜色：橙色;
}
< / style>
< h：form>
< p：tree value =＃{treeIconView.root}var =doc>
< p：treeNode expandedIcon =fa fa-folder-opencollapsedIcon =fa fa-folder>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< p：treeNode type =documenticon =fa fa-file-o>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< p：treeNode type =pictureicon =fa fa-file-picture-o>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< p：treeNode type =mp3icon =fa fa-file-video-o>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< / p：tree>
< / h：form>
但是你可以走得更远。请看下图：
它是生产的使用以下示例：
< style>
.fa {
颜色：橙色;
}
.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 colorOpencollapsedIcon =fa fa-folder>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< p：treeNode type =documenticon =fa fa-file-o>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< p：treeNode type =pictureicon =fa fa-file-picture-o＃{doc.size == '30 KB'？'color30KB'：''}> ;
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< p：treeNode type =mp3icon =fa fa-file-video-o videoColor>
< h：outputText value =＃{doc.name}/>
< / p：treeNode>
< / p：tree>
< / h：form>
您可以在图标属性中添加其他类，但您也可以使用fa类已添加并在css选择器中使用它，或者您可以根据值等在图标中添加特定的条件类...并且因为它可以全部由css更改，您不仅可以更改颜色，还可以更改颜色大小，旋转，CSS动画或其他。
I am developing a Web Java Application with JSF 2.2 and PrimeFaces 6.0. I am building a p:tree and I would like to change the ui-icons color as, for example, in the next picture (the text is censoring).
My xhtml code is:
<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>
I tried with...
.ui-icon-folder-open{
color: red;
}
...but the just icon background changed to red.
Thank you!
For me the most flexible and easiest solution is to use font-awesome 'icons' for the nodes. They are not effectively icons but as the name states, fonts. So these can be changed by css. Hence their popularity and why they are also included in PrimeFaces
The PrimeFaces showcase for tree with icons shows that you can add custom icons for nodes, both the open and closed ones and also for the leaves. Luckily everything you add in the corresponding attributes client-side ends up in 'class' attributes on the html AND you can add multiple white space values in the attributes. This is what font-awesome needs, so by adding expandedIcon="fa fa-folder-open" or collapsedIcon="fa fa-folder" you can get the right icons and with a default style of .fa { color: orange} you get exactly what you want.
In a full example with changed leaves would be something like this:
<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>
But you can go a lot further. Look at the following image:
It is produced with the following example:
<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>
You can add additional 'classes' in the icon attributes, but you can also use the fa classes that are already added and use that in css selectors, or you can add specific conditional 'classes' in the icons based on values etc... And since it can all be changed by css, you can not only change the color, but also the size, rotation, css animations or whatever.
这篇关于如何在PrimeFaces中更改ui-icon的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
