完成后的星云步进器问题

Question

我需要 nebular stepper 方面的帮助，因为我们知道，当任何步骤完成时，都会显示 "checkmark" 图标，但我的用例不同，我需要数字会保留，但颜色会像图标一样变化（即#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 there is no way to define custom template for step mark. Source code 的组件也没有提供步骤标记的修改。

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

nb-stepper {
    counter-reset: stepper;
}

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

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

完成后的星云步进器问题

Nebular stepper Issue after completed

sass

angular

angular6

nebular