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

【问题标题】：How to customize Angular Material stepper component showing label at the top?如何自定义在顶部显示标签的 Angular Material 步进器组件？
【发布时间】：2019-04-13 06:31:31
【问题描述】：

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

stepper-label-position-bottom-example.html

【问题讨论】：

标签： html css angular-material

【解决方案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

【讨论】：

【解决方案2】：

实际上要简单得多。

在您的全局样式 (styles.css) 中添加：

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

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

【讨论】：

【解决方案3】：

很遗憾，我在angular-material-stepper 中找不到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; }

.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; }

【讨论】：