首页 文章

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

提问于
浏览 次
-1

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

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

angular angular-material

1 回答

  • 0

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

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

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

    回复于

相关问题