web-dev-qa-db-ja.com

Primefacesタブヘッダーに画像またはアイコンを追加します

テキストタイトルの代わりにタブヘッダーで画像/アイコンを使用しようとしています（または両方を使用している可能性があります）、画像の背景を設定するtitleStyleClassを使用してテストしていましたが、機能しません

私のprimefacesタブ：

 <p:tab titleStyleClass="tCliente" title="Vehiculo">

私のCSSスタイル

 .tCliente 

 {     
   background-image: url(../images/logo_tropidatos.gif);
 }

あなたの助けをありがとう：D

imageheadertabsiconsprimefaces
16
arkantos

PrimeFaces 3.0以降では、ファセットを追加してタブのタイトルを上書きできます。

<p:tabView>
    <p:tab>
        <!-- overrides title on tab-->
        <f:facet name="title">
               <h:outputText value="tab title"/>
               <p:graphicImage value="/resources/images/icon.png"/>
            </f:facet>

        <h:panelGrid>
            <!-- tab content -->
        </h:panelGrid>
    </p:tab>    
</p:tabView>

それが役に立てば幸い。

45
sabadow

あなたは置くべきです：

background-image: url("../images/logo_tropidatos.gif") !important;

しかしその後、私は問題を抱えています：画像がヘッダーに繰り返されます。 background-repeat:no-repeat;の追加を解決しようとしましたが、同じです...誰か助けてもらえますか？

1
Ricardo

display:inline-block;を追加してみてください

1
Daniel

この方法を試してください

background-image: url("../images/logo_tropidatos.gif") !important;
background-repeat:no-repeat !important;
0
Alexandre Viegas