材料（垂直）步进器答案

【问题标题】：Material (vertical) stepper材料（垂直）步进器
【发布时间】：2016-01-25 06:00:26
【问题描述】：

我正在尝试在我的 Web 应用程序中为向导实现 Material vertical stepper（使用 Angular 和 Bootstrap）。

不幸的是，我没有找到任何可以用作基础的示例实现。我只发现了几个（不太好看）水平的。甚至 Angular Material 还没有实现这个组件。

任何人都可以帮助提供布局示例（HTML + CSS）？特别是，我不知道如何正确绘制步骤圆圈（使用数字或 - 在我的情况下 - 图标），将它们与线连接并与不同设备上的步骤内容相比正确定位它们。另一方面，逻辑/导航（JS/Angular）非常简单。

【问题讨论】：

标签： css twitter-bootstrap material-design

【解决方案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

【讨论】：

非常感谢！使用 sn-p 编辑了答案，因此可以更直接地看到。

【解决方案2】：

Material Design Lite Stepper (Polyfill) 可能是 Material Design Stepper（使用 HTML5）实现的一个很好的例子。

有演示、组件介绍和Javascript API。

【讨论】：

【解决方案3】：

对于几乎纯 Bootstrap 4 解决方案。

  .stepper .line{
      width: 2px;
      background-color: lightgrey !important;
  }    
      
  .stepper .lead {
      font-size: 1.1rem;
  }

<div class="stepper d-flex flex-column mt-5">
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">1</div>
        <div class="line h-100"></div>
      </div>
      <div>
        <h5 class="text-dark">Create your application repository</h5>
        <p class="lead text-muted pb-3">Choose your website name & create repository</p>
      </div>
    </div>
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">2</div>
        <div class="line h-100"></div>
      </div>
      <div>
        <h5 class="text-dark">Clone application respository</h5>
        <p class="lead text-muted pb-3">Go to your dashboard and clone Git respository from the url in the dashboard of your application</p>
      </div>
    </div>
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">3</div>
        <div class="line h-100 d-none"></div>
      </div>
      <div>
        <h5 class="text-dark">Make changes and push!</h5>
        <p class="lead text-muted pb-3">Now make changes to your application source code, test it then commit &amp; push!</p>
      </div>
    </div>
  </div>

Here is the demo link

【讨论】：