Небулярный степпер Выпуск после завершения - PullRequest
Новая
       17

Небулярный степпер Выпуск после завершения

0 голосов
/ 22 ноября 2018

Мне нужна помощь в Небулярном степпере, так как мы знаем, что когда любой шаг завершен, отображается значок «галочка», но мой вариант использования отличается, мне нужно, чтобы номер оставался, но цвет изменился так же, как и значок (т.е. # ffffff).

Я не могу переопределить scss для этого.Посоветуйте, пожалуйста, как мне переопределить.

Пожалуйста, найдите скриншоты ожидаемого и текущего поведения:

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>

1 Ответ

0 голосов
/ 26 ноября 2018

Я никогда не работал с Nebular.
Согласно API нет способа определить пользовательский шаблон для метки шага. Исходный код компонента также не предусматривает изменения метки шага.

В любом случае вы можете заменить символ галочки на css counters .Но это очень хитрое решение: 

nb-stepper {
    counter-reset: stepper;
}

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

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