angular - 完成后的星云步进问题

Question

我需要星云步进器的帮助，因为我们知道，当任何步骤完成时，会显示“复选标记”图标，但我的用例不同，我需要保留数字，但颜色将与图标相同（即 # ffffff）。

我无法为此覆盖 scss。请告知我如何覆盖。

请找到预期和当前行为的屏幕截图：

<nb-card class="card">
<nb-card-body>
    <nb-stepper orientation="horizontal">
        <nb-step [label]="labelOne">
            <ng-template #labelOne></ng-template>
            <h3>Working on Step 1</h3>
        </nb-step>
        <nb-step [label]="labelTwo">
            <ng-template #labelTwo></ng-template>
            <h3>Step 1 completed... Working on Step 2</h3>
        </nb-step>
        <nb-step [label]="labelThree">
            <ng-template #labelThree></ng-template>
            <h3>Step 2 completed... Working on Step 3</h3>
        </nb-step>
        <nb-step [label]="labelFour">
            <ng-template #labelFour></ng-template>
            <h3>Step 3 completed... Working on Step 4</h3>
        </nb-step>
    </nb-stepper>
</nb-card-body>

Answer 1

我从未与星云合作过。
根据API，没有办法为步骤标记定义自定义模板。组件的源代码也没有提供步骤标记的修改。

无论如何，您可以用css counters替换复选标记符号。但这是非常棘手的解决方案：

nb-stepper {
    counter-reset: stepper;
}

nb-stepper .step {
    counter-increment: stepper;
}

nb-stepper .nb-checkmark::before {
    content: counter(stepper) !important;
}