выровнять css компонент временной шкалы для рендеринга данных Dynami c

Question

Я пытаюсь построить компонент временной шкалы, поэтому компонент временной шкалы состоит в основном из 4 компонентов.

1. A cirlce
2. Пунктирная линия
3. левая сторона детали
4. правая сторона

, поэтому я могу добавить эти компоненты, но как их выровнять, чтобы их можно было использовать на основе предоставленных данных Dynami c. Текст должен быть там с левой и правой стороны каждого круга.

коды и поле

образец дизайна

Answer 1

1. Я предлагаю вам создать компоненты TimelineEvent, чтобы они включали в себя как данные, так и информацию о каждом событии (и, очевидно, получать их как реквизиты).

2. Я бы использовал таблицу для выравнивания строк по вертикали:

#wrapper {
  display: inline-block;
}

table {
  border-collapse: collapse;
}

.timeline-event {
  height: 100px;
}

.timeline-event:first-of-type .timeline-dash {
  top: 50%;
  height: 50%;
}

.timeline-event:last-of-type .timeline-dash {
  height: 50%;
}

.middle-cell {
  position: relative;
}

.circle-wrapper {
  position: relative;
  width: 20px;
}

.circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: tomato;
  border-radius: 100%;
  z-index: 2;
}

.timeline-dash {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  border-right: 1px solid black;
  z-index: 1;
}

<div id="wrapper">
  <table>
    <tr class="timeline-event">
      <td class="data">
        Event Data<br/>
        Second Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>

    <tr class="timeline-event">
      <td class="data">
        Event Data<br/>
        Second Row<br/>
        Third Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>

    <tr class="timeline-event">
      <td class="data">
        Event Data<br/> Second Row<br/> Third Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>
  </table>
</div>