Zmiana koloru zakładki panelu akordeonu

Question

Używam panelu akordeonu primefaces. Wewnątrz zakładek mam formularze, które są tworzone programowo. Każdy formularz ma przycisk przesyłania. Teraz chciałem zmienić kolor karty, jeśli formularz tej karty został przesłany. Czy możliwa jest zmiana koloru jednej konkretnej karty i jak mogę to zrobić?

Myślę, że muszę używać różnych klas stylu, jak wspomniano tutaj, ale nie jestem pewien, jak z nich korzystać.

How to highlight a primefaces tree node from backing bean

Każda pomoc jest mile widziana

Answer 1

Można użyć titleStyleClass znacznika <p:tab> do tego. Na przykład.

<p:accordionPanel> 
    <p:tab title="Step 1" titleStyleClass="#{bean.step1Completed ? 'completed' : ''}"> 
     ... 
    </p:tab> 
    <p:tab title="Step 2" titleStyleClass="#{bean.step2Completed ? 'completed' : ''}"> 
     ... 
    </p:tab> 
    <p:tab title="Step 3" titleStyleClass="#{bean.step3Completed ? 'completed' : ''}"> 
     ... 
    </p:tab> 
</p:accordionPanel> 

Spowoduje to ustawienie klasę stylów CSS na karcie do completed gdy stan powraca true. Możesz po prostu określić pożądany styl CSS w klasie stylu .completed {} w swoim własnym pliku style.css, który umieścisz w folderze /resources i dołączyć przez <h:outputStylesheet name="style.css">.

.completed { 
    background: pink; 
}