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

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

stepper-label-position-bottom-example.html

最佳答案

该选项不是由 Angular Material 团队提供的，您可以使用自定义 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

关于html - 如何自定义在顶部显示标签的 Angular Material 步进组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55662734/