Question

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

在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>

非常感谢您

Answer 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也添加到其他步进器即可。

特定STEP角度填角的样式

1 个答案: