如何在PrimeFaces中更改ui-icon的颜色？

Question

我正在使用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-open" collapsedIcon="ui-icon-folder-collapsed">
        <h:outputText value="#{doc.name}" />
    </p:treeNode>
</p:tree>

我试过......

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

...但正好的图标背景变为红色.

谢谢!

Answer 1

对我来说,最灵活和最简单的解决方案是为节点使用字体很棒的"图标".它们不是有效的图标,但正如名称所示,字体.所以这些可以通过css来改变.因此他们的受欢迎程度以及为什么他们也被包括在PrimeFaces中

该PrimeFaces展示了树的图标显示,你可以添加自定义图标节点,无论是开放式和封闭式的人,也为叶.幸运的是,您在相应属性客户端添加的所有内容最终都会出现在html上的"class"属性中,您可以在属性中添加多个空格值.这就是font-awesome需要的东西,所以通过添加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>

您可以在图标属性中添加其他"类",但您也可以使用已添加的fa类并在css选择器中使用它们,或者您可以根据值等在图标中添加特定的条件"类"...而且由于它可以全部由css改变,你不仅可以改变颜色,还可以改变大小,旋转,css动画等等.