Question

我尝试在我的网络应用程序中使用Material vertical stepper来实现向导（使用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

Answer 2

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

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

Here is the demo link

材料（垂直）步进器

3 个答案: