将图像或图标添加到primefaces选项卡标题

时间:2012-01-23 19:41:39

标签: image header tabs icons primefaces

我试图在标题页上使用图像/图标而不是文本标题(或者可能同时使用它们),我正在测试使用titleStyleClass设置图像背景但不起作用

my primefaces标签:

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

我的CSS风格

 .tCliente 

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

感谢您的帮助:D

4 个答案:

答案 0 :(得分:41)

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

希望它有所帮助。

答案 1 :(得分:1)

尝试添加display:inline-block;

答案 2 :(得分:1)

你应该把:

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

但之后我遇到了问题:图片重复进入标题。 我试图解决添加background-repeat:no-repeat;但是相同的问题......有人可以帮忙吗?

答案 3 :(得分:0)

试试这种方式

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