Question

我正在使用Angular Material步进器。我发现步进标签的位置在左侧，底部。我想将步进器标签放置在步进器的顶部并步进圆圈图标如下所示。这是标签位置底部的步进器示例。

stepper-label-position-bottom-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;
}

Stackblitz link goes here

Answer 2

很遗憾，我在angular-material-stepper中找不到MarkerAnnotationView的任何属性。
但它可以帮助您

displayPriority = .required
labelPosition="bottom"
<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; }

Answer 3

实际上要简单得多。

在您的全局样式（styles.css）中，只需添加：

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

Stackblitz链接：https://stackblitz.com/angular/rlqdnyggyedo

如何自定义顶部显示标签的Angular Material步进器组件？

3 个答案: