Как убрать числа по шагам в PrimeNG?

Question

Я использую PrimeNG Steps. Как удалить числа по шагам?

Я пытался использовать свойство CSS по умолчанию.

Answer 1

Компонент

не имеет опции для этого, но вы можете использовать css, чтобы скрыть внутренний Html после псевдоэлемента

style.s css (глобальный стиль )

p-steps{
  .ui-steps-number { 
    overflow: hidden
  }

.ui-steps-number::after {
    content: '';
    background: currentColor;
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

 .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
    color: #007ad9 !important;
}

  .ui-steps .ui-steps-item .ui-steps-number {
    color: #ccc !important;
}
}

demo ?

Приведенный выше стиль изменит стиль для всех компонентов p-шагов, но вы можете использовать пользовательские styleClass вот так

шаблон

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

style.s css

.dot-theme {
  .ui-steps-number { 
    overflow: hidden
  }

.ui-steps-number::after {
    content: '';
    background: currentColor ;
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.ui-state-highlight .ui-steps-number {
    color: #007ad9 !important;
}

   .ui-steps-number {
    color: #ccc !important;
}
}

демо ?