材料(垂直)步进器

Question

我正在尝试在我的Web应用程序中使用Material垂直步进器(使用Angular和Bootstrap).

不幸的是,我找不到任何可以用作基础的示例实现.我只发现了一些(不太好看)水平的.甚至Angular Material也没有实现这个组件.

任何人都能够帮助一个布局的例子(HTML + CSS)？特别是,我不知道如何正确绘制步骤圈(带数字或 - 在我的情况下 - 图标),用线连接它们并将它们与不同设备上的步骤内容相比正确定位.另一方面,逻辑/导航(JS/Angular)非常简单.

Answer 1

这是你需要的吗？

*,
*:before,
*:after {
  box-sizing: border-box;
}
.step {
  position: relative;
  min-height: 32px
  /* circle-size */
  ;
}
.step > div:first-child {
  position: static;
  height: 0;
}
.step > div:last-child {
  margin-left: 32px;
  padding-left: 16px;
}
.circle {
  background: #4285f4;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  position: relative;
  color: white;
  text-align: center;
}
.line {
  position: absolute;
  border-left: 1px solid gainsboro;
  left: 16px;
  bottom: 10px;
  top: 42px;
}
.step:last-child .line {
  display: none;
}
.title {
  line-height: 32px;
  font-weight: bold;
}

<div class="step">
  <div>
    <div class="circle">n</div>
    <div class="line"></div>
  </div>
  <div>
    <div class="title">Title</div>
    <div class="body">Body</div>
  </div>
</div>

或者看看是完整的 演示