html - PrimeNG 组件菜单步骤，我如何使用 ui-steps-incomplete

Question

我使用 PrimeNG 的组件:步骤

它有效，但我如何使用 ui-steps-incomplete？

:host >>> .ui-steps .ui-steps-item {
  width: 20%;
}

:host >>> .ui-steps.steps-custom .ui-steps-item .ui-steps-number {
  background-color: #0081c2;
  color: #FFFFFF;
  display: inline-block;
  width: 36px;
  border-radius: 50%;
}

:host >>> .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
  color: transparent;
}

:host >>> .ui-steps ui-steps-incomplete {
  background-color: red;
}

<p-steps [model]="items" [(activeIndex)]="routingIndex" [readonly]="false" ></p-steps>

Answer 1

它已经自动应用于非事件状态。如果您查看生成的 HTML，PrimeNG 会创建一个列表项，其应用的类如下:

<li class="ui-steps-item ui-state-default ui-state-complete ui-state-disabled ui-steps-incomplete ng-star-inserted" ng-reflect-klass="ui-steps-item" ng-reflect-ng-class="[object Object]">...</li>