Angular Material Stepper 组件在底部显示标签

Question

使用 Angular Material Stepper component , 如何制作看起来像 this sample 的步进器.我想让步进器标签显示在步数的底部，如示例中所示。

我尝试浏览文档，但似乎没有一个选项可以做到这一点。

Answer 1

Afaik，正如您所说，目前没有本地选项可以执行此操作。您可以尝试使用一些 CSS 来根据需要设置元素的样式。

我刚刚尝试并创建了这个 stackblitz .我只使用了一些 CSS 来覆盖当前样式，使步进器看起来像您的示例:

.mat-horizontal-stepper-header-container{
  margin-bottom: 20px; 
}

.mat-horizontal-stepper-header{ 
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: -15px;
}

.mat-step-label{
  position: relative;
  top: 10px;
}

.mat-stepper-horizontal-line{
 margin: 0 -30px !important;
}

.mat-horizontal-stepper-header .mat-step-icon, .mat-horizontal-stepper-header .mat-step-icon-not-touched{
  margin-right: 0 !important;
}

它不是那么优雅，但它似乎有效。

如果这是您正在寻找的内容，您应该使用更长/更短的标签和不同的屏幕尺寸进行一些彻底的测试。