Thay đổi màu của một tab của bảng điều khiển accordion

Question

Tôi đang sử dụng bảng điều khiển accordion của các nguyên tố. Bên trong các tab tôi có các biểu mẫu được tạo lập trình. Mỗi mẫu có một nút gửi. Bây giờ tôi muốn thay đổi màu sắc của một tab, nếu hình thức của tab này đã được gửi. Vì vậy, nó có thể thay đổi màu sắc của một tab cụ thể và làm thế nào tôi có thể quản lý để thực hiện công việc này?

Tôi nghĩ rằng tôi phải sử dụng các lớp phong cách khác nhau như đã đề cập ở đây nhưng tôi không hoàn toàn chắc chắn cách sử dụng chúng.

How to highlight a primefaces tree node from backing bean

Any help is appreciated

Answer 1

Bạn có thể sử dụng titleStyleClass của thẻ <p:tab> cho việc này. Ví dụ.

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

này sẽ thiết lập kiểu class CSS của tab để completed bất cứ khi nào điều kiện trả true. Bạn chỉ có thể chỉ định CSS mong muốn trong lớp phong cách .completed {} trong tệp style.css của riêng bạn mà bạn đặt trong thư mục /resources và bao gồm bởi <h:outputStylesheet name="style.css">.

.completed { 
    background: pink; 
}