Угловой материал шаговых коллекторов

Question

Я пытаюсь реализовать этот дизайн для шагов, но пока не удалось, самым близким, что я получил, было присвоение цвета линии рядом с текущим активным шагом:

.mat-horizontal-stepper-header {
padding: 0 8px 0 16px !important;
&[ng-reflect-active="true"]+.mat-stepper-horizontal-line {
    border-top-color: rgba(37, 82, 245, 0.54) !important;
}

}

но цель состоит в том, чтобы закрасить предыдущую строку активного шага, как на рисунке.

есть какие-нибудь мысли по этому поводу?вот стеблиц для репро https://stackblitz.com/edit/angular-ngcsei

Answer 1

Вот мое решение, вдохновленное предложением @ dazzed.

В HTML я даю класс для mat-horizontal-stepper из 'last-edited-step-'last-edited-step-' + stepper.selectedIndex.

С точки зрения CSS, я динамически генерирую классы с помощью SASS для циклов, поэтому цикл ($i) составляет от .last-edited-step-last-edited-step-1 до .last-edited-step-last-edited-step-42 (например, 42, то естьколичество шагов, конечно).Затем внутри каждого из них я снова зацикливаюсь ($j) между первой и n-й строками, а затем присваиваю свойства (в моем случае, цвет зеленой границы).

stepper.component.html

    <mat-horizontal-stepper #stepper [linear]="true" class="{{ 'last-edited-step-' + stepper.selectedIndex }}">

        <mat-step>
        </mat-step>

        <mat-step>
        </mat-step>

        <mat-step>
        </mat-step>

    </mat-horizontal-stepper>

stepper.component.sass

/deep/ mat-horizontal-stepper
  @for $i from 1 through 42
    &.last-edited-step-#{$i}
     @for $j from 1 through $i
        .mat-stepper-horizontal-line:nth-of-type(#{$j})
          border-color: #00c190 !important

Используя это, вместе с стилизацией нескольких других элементов (кружки, значки, пропорции линий) вы можете получить что-то вроде этого:

Answer 2

В производственной среде те, которые отражают активные атрибуты, не существуют, поэтому я придумал это решение на основе индекса элементов.Я просто даю класс элементу mat-horizontal-stepper с индексом активного шага: last-edited-step-0, last-edited-step-1, last-edited-step-2.Тогда я создал этот миксин:

@mixin styleStepLine($index) {
    .mat-horizontal-stepper-header {
        &+.mat-stepper-horizontal-line:nth-child(#{$index}) {
            height: 2px;
            background-image: linear-gradient(to right, #00b495, #00aeea);
        }
    }
}

@mixin styleEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: map-get($colors, 'light-green');
        }
    }
}

@mixin styleUnEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: #e8e8e8;
        }
    }
}

.last-edited-step-1 {
    @include styleStepLine(2);
    @include styleEditedStepIcon(1);
    @include styleUnEditedStepIcon(3);
}

.last-edited-step-2 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleEditedStepIcon(1);
    @include styleEditedStepIcon(3);
}

Answer 3

Это прекрасно работает для меня, чтобы изменить выбранный шаг

.mat-horizontal-stepper-header {
  &[ng-reflect-selected="true"].mat-step-header {
    background-color: #000;
  }
&[ng-reflect-selected="false"].mat-step-header {
    background-color: #fff;
  }
}

Answer 4

Некоторое время назад я делал нечто подобное, хотя оно и не идеально, но может помочь вам в этом.Вы можете думать иначе.Попробуйте нацелиться на все строки, прошедшие активный шаг.В этом примере все шаги после активного имеют пунктирную линию, а все предыдущие - сплошную линию.

.mat-stepper-horizontal-line {
   border-top-style: solid;
}

.mat-horizontal-stepper-header {
&[ng-reflect-active='false'] + .mat-stepper-horizontal-line {
  border-top-style: dashed;
}

&[ng-reflect-selected='true'] + .mat-stepper-horizontal-line {
  border-top-style: dashed;
}

}