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

Question

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

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

Как выделить узел дерева простых лиц из базового компонента

Любая помощь приветствуется

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

Answer 2

Идеальный ответ от @BalusC! Плюс, если это не работает для вас, просто добавьте! в css.

.completed {
background: red !important;
}