PrimeNG 11版本p-steps移除完成/未完成样式类的替代方案咨询

解决方案 #

PrimeNG 11 版本移除了旧版ui-前缀的状态类，统一替换为p-前缀的类名体系，不需要修改组件源码，通过以下两种方式都可以实现不同步骤状态的样式区分：

方式1：纯CSS实现（无额外TS逻辑）

p-steps组件会自动给当前激活的步骤项根节点添加.p-highlight类，结合CSS兄弟选择器就可以直接定位三种状态的步骤，不需要写额外的业务逻辑：

/* 已完成步骤：当前激活项之前的所有步骤 */
.p-steps .p-steps-item:has(~ .p-highlight) .p-menuitem-link {
  background-color: #background1;
  color: #color1;
}

/* 当前激活步骤 */
.p-steps .p-steps-item.p-highlight .p-menuitem-link {
  background-color: #background2;
  color: #color2;
}

/* 未完成步骤：当前激活项之后的所有步骤 */
.p-steps .p-highlight ~ .p-steps-item .p-menuitem-link {
  background-color: #background3;
  color: #color3;
}

注意：:has()选择器在Chrome 105+、Firefox 121+、Safari 15.4+版本原生支持，如果需要兼容更低版本浏览器，使用下面的动态类方案更稳妥。如果样式写在组件私有样式文件中不生效，可将样式移至全局styles.css，或给组件添加encapsulation: ViewEncapsulation.None配置突破视图封装限制。

方式2：动态绑定自定义类（兼容所有浏览器）

利用p-steps支持的MenuItem.styleClass配置项，在步骤切换时动态给不同状态的步骤绑定自定义类，实现完全可控的样式自定义：

1. 组件TS逻辑：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-steps-demo',
  templateUrl: './steps-demo.component.html',
  encapsulation: ViewEncapsulation.None
})
export class StepsDemoComponent implements OnInit {
  items: MenuItem[] = [];
  activeIndex: number = 0;

  ngOnInit() {
    this.items = [
      {label: '步骤1'},
      {label: '步骤2'},
      {label: '步骤3'}
    ];
    this.updateStepStyleClass();
  }

  // 每次切换步骤后调用，更新每个步骤的状态类
  updateStepStyleClass() {
    this.items.forEach((item, index) => {
      if (index < this.activeIndex) {
        item.styleClass = 'step-completed';
      } else if (index === this.activeIndex) {
        item.styleClass = 'step-active';
      } else {
        item.styleClass = 'step-pending';
      }
    });
  }

  next() {
    if (this.activeIndex < this.items.length - 1) {
      this.activeIndex++;
      this.updateStepStyleClass();
    }
  }

  prev() {
    if (this.activeIndex > 0) {
      this.activeIndex--;
      this.updateStepStyleClass();
    }
  }
}

2. 组件模板：

<p-steps [model]="items" [(activeIndex)]="activeIndex" [readonly]="false"></p-steps>
<div class="step-action">
  <button (click)="prev()">上一步</button>
  <button (click)="next()">下一步</button>
</div>

3. 自定义样式：

.step-completed .p-menuitem-link {
  background: #background1;
  color: #color1;
}
.step-active .p-menuitem-link {
  background: #background2;
  color: #color2;
}
.step-pending .p-menuitem-link {
  background: #background3;
  color: #color3;
}

内容的提问来源于stack exchange，提问作者Chaitra_Shenoy