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>

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

1 个答案: