Angular:如何在 PrimeNG p-steps 组件中设置已完成步骤的样式？

Question

我正在尝试使用 PrimeNG 中的 p-steps 组件。我想为已完成和未完成的步骤设置不同的样式。也就是说，如果用户当前处于步骤 3，则步骤 1 和 2 已完成，我想将背景颜色设置为绿色。 我注意到 PrimeNG 14 不再支持 p-steps-complete。

我的组件实现非常基本:

<p-steps
  #stepModule
  [model]="items"
  [readonly]="false"
  [activeIndex]="stepEvent.stepIndex">
</p-steps>

谢谢

Answer 1

由于PrimeNG 14不再支持p-steps-complete，唯一的机会是使用css

想象一下 styles.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-steps 使用 styleClass

<p-steps [model]="items" 
         [(activeIndex)]="activeIndex" 
         [readonly]="false" 
         [styleClass]="'completed-'+completed">
</p-steps>

因此，当您将变量“completed”更改为 1、2、3 或 4 时，您会看到应用的样式

参见stackblitz

已更新如果我们希望“事件”不获得颜色，我们可以使用: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;
}