Как настроить шаговый компонент Angular Material с надписью вверху?

Question

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

шагового этикетка-позиционно-снизу example.html

Answer 1

Эта опция не предоставляется командой разработчиков угловых материалов, вы можете исправить эту проблему, используя пользовательский CSS.

/** custom CSS as per your :required */
::ng-deep .mat-horizontal-stepper-header {
    box-sizing: border-box;
    flex-direction: column-reverse !important;
    height: auto;
    padding: 24px;
}
::ng-deep .mat-horizontal-stepper-header .mat-step-label {
    padding: 0px 0px 16px !important;
}
::ng-deep .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, ::ng-deep .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after{
    top: 68px !important;
}

Ссылка на стек может быть здесь

Answer 2

Это на самом деле намного проще.

В ваших глобальных стилях (styles.css) просто добавьте:

.mat-step-header {
  flex-direction: column;
}

Ссылка на стек: https://stackblitz.com/angular/rlqdnyggyedo

Answer 3

К сожалению, я не смог найти атрибута для labelPosition="bottom" в angular-material-stepper .
но это может помочь вам

<mat-horizontal-stepper ngClass="mat-stepper-label-position-top"
....
</mat-horizontal-stepper>

В style.css добавить этот код

.mat-stepper-label-position-top .mat-horizontal-stepper-header{ flex-direction: column-reverse !important; }

.mat-stepper-label-position-top .mat-horizontal-stepper-header .mat-step-label{ height: 48px; }

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before, .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after{ bottom: 36px !important; top:unset !important; }