CODEWITHSUNDEEP
angularsassangular6nebular
Rakesh Singh
Rakesh Singh

Reputation: 231

Nebular stepper Issue after completed

I need help in nebular stepper, as we know that when the any step completed then the "checkmark" icon displayed but my use case is different I need the number will remain but color will change as same as icon (i.e. # ffffff).

I am not able to override the scss for this. Please advise how can I override.

Please find the screenshots of expected and current behavior:

Current Behavior

Expected Behavior

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

Upvotes: 0

Views: 1636

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

I never worked with Nebular.
According to API there is no way to define custom template for step mark. Source code of component does not provide modification of step mark too.

Anyway you can replace checkmark symbol with css counters. But it's very tricky solution:

nb-stepper {
    counter-reset: stepper;
}

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

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

Upvotes: 2

Related Questions