Cambiar el color de una pestaña de un panel de acordeón

Question

Estoy utilizando el panel de acordeón de Primefaces. Dentro de las pestañas tengo formularios que se crean mediante programación. Cada formulario tiene un botón de enviar. Ahora quería cambiar el color de una pestaña, si el formulario de esta pestaña se ha enviado. Entonces, ¿es posible cambiar el color de una pestaña específica y cómo podría hacerlo funcionar?

Creo que tengo que usar diferentes clases de estilo como se menciona aquí, pero no estoy muy seguro de cómo usarlas.

How to highlight a primefaces tree node from backing bean

Cualquier ayuda se agradece

Answer 1

Puede utilizar el titleStyleClass de la etiqueta <p:tab> para esto. P.ej.

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

Esto establecerá la clase de estilo CSS de la ficha para completed siempre que la condición devuelve true. Puede especificar el CSS deseado en la clase de estilo .completed {} en su propio archivo style.css que coloca en la carpeta /resources e incluir por <h:outputStylesheet name="style.css">.

.completed { 
    background: pink; 
}