Reputation: 9135
I am trying to build a timeline component, so the timeline component has majorly 4 components.
so i am able to add these components, but how to align this so that can be use based on the dynamic data supplied. The text should be there in the left and right side of each circle.
Upvotes: 0
Views: 130
Reputation: 5138
I suggest you create your "TimelineEvent" components so they include both the data and the info regarding each event (and receive them as props, obviously).
I'd use a table to keep the rows aligned vertically:
#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>
Upvotes: 1