Customize p:tab titles in p:accordionPanel

user_4925514 0
Viewed 202

I would like to add some component in the accordion panel tab itself, not the cascading panel as shown below.

enter image description here

I would like to add a commandButton or a progress bar as 'quick' summary of data or functionality of what is actually contained in the 'hidden' panel.

Is this possible? or do i have to teach myself how to write a custom component? sample code below.

Am not expert and am literally stuck here.

<p:accordionPanel>
  <p:tab title="Tab 0">
    <f:facet name="face0">
      <p:outputLabel value="hello 0"></p:outputLabel>
    </f:facet>
  </p:tab>
  <p:tab title="Tab 1">
    <f:facet name="facet1">
      <p:outputLabel value="hello 1"></p:outputLabel>
    </f:facet>
  </p:tab>
  <p:tab title="Tab 2">
    <f:facet name="facet2">
      <p:outputLabel value="hello 2"></p:outputLabel>
    </f:facet>
  </p:tab>
  <p:tab title="Tab 3">
    <p:outputLabel value="hello hidden panel"></p:outputLabel>
  </p:tab>
</p:accordionPanel>
primefaces jsf
1 Answers

According to the p:accordion documentation

Titles can also be defined with title facet.

So you can do:

<p:accordionPanel>  
    <p:tab>
        <f:facet name="title">
            Your components
        </f:facet>
    </p:tab>
</p:accordionPanel>
user_8806190
Related