我正在try 使用PrimeNG中的p-Steps组件.我想对已完成和未完成的步骤有不同的造型.也就是说，如果用户当前处于第3步，则第1步和第2步已完成，我想将背景 colored颜色 设置为绿色. 我注意到PrimeNG 14不再支持p-Steps-Complete.
我的组件实现非常基本:
<p-steps
#stepModule
[model]="items"
[readonly]="false"
[activeIndex]="stepEvent.stepIndex">
</p-steps>谢谢
由于PrimeNG 14不再支持p-Steps-Complete，因此唯一的机会就是使用CSS
想象一下在style中.css类似于
.p-steps.completed-1 .p-steps-item:nth-child(-n + 1) .p-menuitem-link .p-steps-number,
.p-steps.completed-2 .p-steps-item:nth-child(-n + 2) .p-menuitem-link .p-steps-number,
.p-steps.completed-3 .p-steps-item:nth-child(-n + 3) .p-menuitem-link .p-steps-number,
.p-steps.completed-4 .p-steps-item:nth-child(-n + 4) .p-menuitem-link .p-steps-number
{
background:red;
color:white;
border: 1px solid crimson;
}
通过这种方式，您可以"完成"一个变量
completed=0;
你的p步骤用了styleClass
<p-steps [model]="items"
[(activeIndex)]="activeIndex"
[readonly]="false"
[styleClass]="'completed-'+completed">
</p-steps>
因此，当您将变量"Complete"更改为1、2、3或4时，您会看到应用的样式
Updated如果我们想要"活动"而不是得到 colored颜色 ，我们可以使用:not(.p-highlight)
.p-steps.completed-1 .p-steps-item:nth-child(-n + 1):not(.p-highlight) .p-menuitem-link .p-steps-number,
.p-steps.completed-2 .p-steps-item:nth-child(-n + 2):not(.p-highlight) .p-menuitem-link .p-steps-number,
.p-steps.completed-3 .p-steps-item:nth-child(-n + 3):not(.p-highlight) .p-menuitem-link .p-steps-number,
.p-steps.completed-4 .p-steps-item:nth-child(-n + 4):not(.p-highlight) .p-menuitem-link .p-steps-number
{
background:red;
color:white;
border: 1px solid crimson;
}