特定 STEP 角度底漆的样式答案

【问题标题】：Style of a specific STEP angular primeng特定 STEP 角度底漆的样式
【发布时间】：2018-10-22 08:00:24
【问题描述】：

我将 angular 与 primeng 和 Steps 组件一起使用。我正在尝试为禁用的步骤的元素赋予特定的样式。

在primeng文档中，我看到了这个属性badgeStyleClass，但对我不起作用，因为禁用元素的样式不适用：

这是我的代码：

this.otherItems = [
            {
                label: 'Personal',
                command: (event: any) => { }
            },
            {
                label: 'Seat',
                disabled: true,
                command: (event: any) => { }
            },
            {
                label: 'Payment',
                command: (event: any) => { }
            },
            {
                label: 'Confirmation',
                command: (event: any) => { }
            },
            {
                label: 'Order Made',
                disabled: true,
                badgeStyleClass: '#43752b',
                command: (event: any) => { }
            }
        ];

<h3>Clickable only in an specific steps</h3>
<div class="steps">
    <p-steps [model]="otherItems" [(activeIndex)]="actIndexClickableSpecificStep" [readonly]="false"></p-steps>
</div>

非常感谢

【问题讨论】：

标签： angular primeng

【解决方案1】：

您可以通过在您的应用中覆盖 Primeng 的 CSS 来实现。我为你创建了一个堆栈闪电战。我已经覆盖了禁用块和活动块的 CSS。

这是Stackbliz Url 供您参考。

对于覆盖添加您自己的类 customestepper 并覆盖 CSS 属性，如下所示：

<p-steps class="customstepper" [model]="otherItems" [(activeIndex)]="actIndexClickableSpecificStep" [readonly]="false"></p-steps>

.customstepper .ui-steps .ui-steps-item.ui-state-disabled {
  background: #ddd;
}
.customstepper .ui-steps .ui-steps-item.ui-state-disabled .ui-menuitem-link {
  color: green;
}

这样，它只影响这个特定的步进器，如果你想将它应用到其他步进器，那么只需将此 CSS 也添加到其他步进器。

【讨论】：