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

它不是那么优雅，但似乎可以工作。

如果这是您要查找的内容，则应使用更长或更短的标签以及不同的屏幕尺寸进行彻底的测试。

Answer 2

对于水平卧式步进器，可以定义标签的位置。 end是默认值，而bottom会将其放置在步骤图标下而不是其侧面。此行为由labelPosition属性控制。

使用此链接：https://material.angular.io/components/stepper/overview

角材料步进器组件在底部显示标签

2 个答案: