web-dev-qa-db-ja.com

PrimeFacesでUIアイコンの色を変更するにはどうすればよいですか？

私はWebを開発していますJava JSF 2.2およびPrimeFaces 6.0を使用したアプリケーションです。p:treeを構築しています。たとえば、UIアイコンの色を次の画像（テキストは打ち切りです）。

enter image description here

私の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;
}

...しかし、アイコンの背景だけが赤に変わりました。

ありがとうございました！

jsfprimefacescolorsicons
8
Juan Camacho

私にとって最も柔軟で簡単な解決策は、ノードにfont-awesome 'icons'を使用することです。それらは効果的なアイコンではなく、名前が示すようにフォントです。したがって、これらはcssによって変更できます。したがって、彼らの人気となぜ彼らも PrimeFacesに含まれています

アイコン付きツリーのPrimeFacesショーケース は、開いているノードと閉じているノードの両方、および葉のノードにカスタムアイコンを追加できることを示しています。幸い、クライアント側で対応する属性に追加したものはすべて、htmlの「クラス」属性になり、属性に複数の空白値を追加できます。これがfont-awesomeに必要なものなので、expandedIcon="fa fa-folder-open"またはcollapsedIcon="fa fa-folder"を追加することにより、適切なアイコンを取得でき、デフォルトのスタイル.fa { color: orange}を使用して、希望どおりの結果を得ることができます。

enter image description here

葉が変更された完全な例では、次のようになります。

<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>

しかし、さらに先に進むことができます。次の画像を見てください。

enter image description here

次の例で作成されます。

<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アニメーションなども変更できます。

14
Kukeltje