Изменение цвета вкладки панели аккордеона

Question

Я использую панель аккордеона. Внутри вкладок у меня есть формы, которые создаются программно. Каждая форма имеет кнопку отправки. Теперь я хотел изменить цвет вкладки, если форма этой вкладки была отправлена. Так можно ли изменить цвет одной конкретной вкладки и как мне удастся сделать эту работу?

Я думаю, что мне нужно использовать разные классы стиля, как упомянуто здесь, но я не совсем уверен, как их использовать.

How to highlight a primefaces tree node from backing bean

любая помощь

Answer 1

Вы можете использовать titleStyleClass в <p:tab> тег для этого. Например.

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

Это позволит установить класс стиля CSS вкладки для completed всякий раз, когда условие возвращает true. Вы можете просто указать желаемый CSS в классе стиля .completed {} в своем собственном файле style.css, который вы поместили в папку /resources и включите в нее <h:outputStylesheet name="style.css">.

.completed { 
    background: pink; 
}