CODEWITHSUNDEEP
jsfprimefaces
Monster
Monster

Reputation: 189

Show icon on the header of p:panel

I'm using the component <p:panel>

If we take the Advanced Panel as an example, is there any way that makes me able to add an icon at the left of the text "About Barca"?

Upvotes: 4

Views: 4125

Answers (2)

John Alexander Betts
John Alexander Betts

Reputation: 5186

This is the way you can add an icon to a panel component:

<p:panel header="the header text you want">
    <f:facet name="actions">
        <p:commandLink
            styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
            <h:outputText styleClass="ui-icon ui-icon-help" />
        </p:commandLink>
    </f:facet>
</p:panel>

Upvotes: 1

StarsSky
StarsSky

Reputation: 6711

You can extend the header using <f:facet name="header">

<f:facet name="header">
  <h:panelGrid columns="2">
    <span class="ui-icon" />
    <h:outputText value="About Barca" />
  </h:panelGrid>
</f:facet>

You can use a span element plus CSS customization or the p:graphicImage component.

Upvotes: 4

Related Questions