Отображение данных timelineeventsdata

Vertical Timeline

Вертикальная временная шкала для истории развития продукта и этапов дорожной карты.

Oct 2024

V2 Release

Launched the modular registry architecture.

Aug 2024

Beta Phase

Community testing and initial component set.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

---
import { VerticalTimeline } from 'astro-component-kit';
---

<VerticalTimeline>Content</VerticalTimeline>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/VerticalTimeline.astro:

---
---
<div class="timeline-v">
  <div class="t-item">
    <div class="t-date">Oct 2024</div>
    <div class="t-content"><h4>V2 Release</h4><p>Launched the modular registry architecture.</p></div>
  </div>
  <div class="t-item">
    <div class="t-date">Aug 2024</div>
    <div class="t-content"><h4>Beta Phase</h4><p>Community testing and initial component set.</p></div>
  </div>
</div>
<style>
  .timeline-v { position: relative; padding-left: 2rem; }
  .timeline-v::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(99,102,241,0.2); }
  .t-item { position: relative; margin-bottom: 2.5rem; }
  .t-item::after { content: ""; position: absolute; left: -2.35rem; top: 5px; width: 12px; height: 12px; background: #6366f1; border: 3px solid #080b14; border-radius: 50%; }
  .t-date { font-size: 0.75rem; font-weight: 700; color: #6366f1; margin-bottom: 0.25rem; }
  h4 { color: #fff; margin: 0; }
  p { font-size: 0.85rem; color: #94a3b8; margin-top: 0.25rem; }
</style>

Краткая информация

Категория: Отображение данных
Имя файла: VerticalTimeline.astro
Зависимости: Нет — чистый Astro + CSS
Теги: timelineeventsdata