Visualización de Datos ganttprojectdata
Gantt Timeline UI
Diagrama de Gantt minimalista para seguimiento de fases temporales y tareas.
Vista Previa en Vivo
Uso
Copia y pega este código directamente en tu página de Astro:
astro
---
import { GanttTimelineUI } from 'astro-component-kit';
---
<GanttChartMinimal>Content</GanttChartMinimal>Instalación Manual
Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/GanttTimelineUI.astro:
astro
---
---
<div class="gantt">
<div class="g-row"><div class="g-bar" style="width: 40%; margin-left: 10%; background: #6366f1"></div></div>
<div class="g-row"><div class="g-bar" style="width: 30%; margin-left: 55%; background: #c084fc"></div></div>
<div class="g-row"><div class="g-bar" style="width: 20%; margin-left: 20%; background: #10b981"></div></div>
</div>
<style>
.gantt { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); }
.g-row { height: 20px; position: relative; width: 100%; background: rgba(255,255,255,0.02); border-radius: 4px; }
.g-bar { height: 100%; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
</style>Información Rápida
- Categoría
- Visualización de Datos
- Nombre de archivo
GanttTimelineUI.astro- Dependencias
- Ninguna — Astro nativo + CSS puro
- Etiquetas
- ganttprojectdata