1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos timelineeventsdata

Vertical Timeline

Línea de tiempo vertical para hitos históricos, evolución de producto y lanzamientos.

Oct 2024

V2 Release

Launched the modular registry architecture.

Aug 2024

Beta Phase

Community testing and initial component set.

Uso

Copia y pega este código directamente en tu página de Astro:

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

<VerticalTimeline>Content</VerticalTimeline>
--- import { VerticalTimeline } from 'astro-component-kit'; --- <VerticalTimeline>Content</VerticalTimeline>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/VerticalTimeline.astro:

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>
--- --- <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>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
VerticalTimeline.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
timelineeventsdata