css - Material (垂直)步进器

Question

我正在尝试实现 Material vertical stepper用于我的 Web 应用程序中的向导(使用 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>

或者看满 Demo