reactjs - CSS 的垂直进度步骤

Question

我有反应组件打印火车的行程，我需要用这样的垂直线统一圆圈:

我需要统一这些节点(带竖线的圆圈)并且正在寻找一个想法。我正在使用 flex，并且使用包含 3 个子组件(一个与时间，一个与节点 - 圆圈，一个与 Station 和实时)的 react 组件呈现元素。

我必须从头开始编写 css(使用最大的 flexbox 或网格)。

提前谢谢你。

Answer 1

我的尝试。

我会使用一个无序列表，其中时间和描述是 flexbox 列表项的子项。使用伪元素(适当堆叠)可以轻松绘制点和垂直线。

.events li { 
  display: flex; 
  color: #999;
}

.events time { 
  position: relative;
  padding: 0 1.5em;  }

.events time::after { 
   content: "";
   position: absolute;
   z-index: 2;
   right: 0;
   top: 0;
   transform: translateX(50%);
   border-radius: 50%;
   background: #fff;
   border: 1px #ccc solid;
   width: .8em;
   height: .8em;
}


.events span {
  padding: 0 1.5em 1.5em 1.5em;
  position: relative;
}

.events span::before {
   content: "";
   position: absolute;
   z-index: 1;
   left: 0;
   height: 100%;
   border-left: 1px #ccc solid;
}

.events strong {
   display: block;
   font-weight: bolder;
}

.events { margin: 1em; width: 50%; }
.events, 
.events *::before, 
.events *::after { box-sizing: border-box; font-family: arial; }

<ul class="events">
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
    
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time and other text that may span over 2 lines</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
  
  <li>
    <time datetime="10:03">10:03</time> 
    <span><strong>Bat &amp; Ball</strong> On time</span></li>
</ul>