css - 更改 Accordion 面板选项卡的颜色

Question

我正在使用 primefaces 的 Accordion 面板。在选项卡内，我有以编程方式创建的表单。每个表单都有一个提交按钮。现在我想更改选项卡的颜色，如果已提交此选项卡的表单。那么是否可以更改一个特定选项卡的颜色，我如何才能做到这一点？

我想我必须使用此处提到的不同样式类，但我不太确定如何使用它们。

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 .您可以在 .completed {} 中指定所需的 CSS您自己的样式类 style.css您放入的文件 /resources文件夹并包含 <h:outputStylesheet name="style.css"> .

.completed {
    background: pink;
}