Вертикальные шаги прогресса с помощью CSS
У меня есть компоненты React, которые печатают маршрут из поезда, и мне нужно объединить круги вертикальной линией, например:
Мне нужно объединить эти узлы (круги с вертикальной полосой), и я искал идею. Я использую flex, и элементы визуализируются с использованием компонента реакции, который включает 3 подкомпонента (один со временем, один с узлом - круг и один со станцией и в реальном времени).
Мне нужно написать css с нуля (используя максимум flexbox или grid).
Заранее спасибо.
Возможно, вы можете использовать теги <ul> <li> и установить собственный значок изображения для маркера ..
как насчет использования этих компонентов: ahlechandre.github.io/mdl-stepper
Дело в том, что мне нужен степпер, который не заказан, например, точки отправления и назначения обозначены черным фоном, а положение, где поезд отмечен значком. Все это уже сделано с нуля. Мне просто нужно понять, как объединить все эти узлы вертикальной линией.
Ответы 3
Круги могут быть нарисованы с помощью div с радиусом границы, а затем двух круглых div и разделены другим div с выделенным цветом боковой границы.
У меня уже нарисованы и расположены круги, осталось только провести вертикальную линию, соединяющую их все. Остальное уже сделано. Но спасибо!
Да, это можно нарисовать с помощью div между ними с цветом границы.
используйте ключевые кадры анимации css, чтобы показать, что анимация рисования будет более интересной, чем добавление div с радиусом границы
Моя попытка.
Я бы выбрал неупорядоченный список, в котором время и описание являются дочерними элементами списка 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 & Ball</strong> On time</span></li>
<li>
<time datetime = "10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime = "10:03">10:03</time>
<span><strong>Bat & 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 & Ball</strong> On time</span></li>
<li>
<time datetime = "10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
<li>
<time datetime = "10:03">10:03</time>
<span><strong>Bat & Ball</strong> On time</span></li>
</ul>Вы можете использовать границу обертки следующим образом:
.timeline-wrapper {
margin-left: 1.5rem;
border-left: 3px solid #ddd;
}
.node {
padding-left: .5rem;
padding-bottom: 1.5rem;
position: relative;
}
.node h3, .node p {
margin: 0;
}
.node::before {
content: "";
width: .5rem;
height: .5rem;
background: #fff;
border: 2px solid #ccc;
border-radius: 50%;
position: absolute;
top: .3rem;
left: -.5rem;
}<div class = "timeline-wrapper">
<div class = "node">
<h3>Title</h3>
<p>Status / Time</p>
</div>
<div class = "node">
<h3>Title</h3>
<p>Status / Time</p>
</div>
<div class = "node">
<h3>Title</h3>
<p>Status / Time</p>
</div>
<div class = "node">
<h3>Title</h3>
<p>Status / Time</p>
</div>
<div class = "node">
<h3>Title</h3>
<p>Status / Time</p>
</div>
</div>
Добавить минимальный html и css