1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos stepsdatavertical

Vertical Steps

Línea temporal con pasos de progreso verticales y descripciones de estado.

CheckAccount Created
2Verify Email
3Setup Profile

Uso

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

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

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

Instalación Manual

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

astro 
---
---
<div class="v-steps">
  <div class="v-step done"><span>Check</span>Account Created</div>
  <div class="v-step current"><span>2</span>Verify Email</div>
  <div class="v-step"><span>3</span>Setup Profile</div>
</div>
<style>
  .v-steps { display: flex; flex-direction: column; gap: 1rem; }
  .v-step { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.9rem; font-weight: 600; }
  .v-step span { width: 24px; height: 24px; background: #1e293b; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid #334155; }
  .current { color: #fff; }
  .current span { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); }
  .done span { background: #10b981; border-color: #10b981; color: #fff; }
</style>
--- --- <div class="v-steps"> <div class="v-step done"><span>Check</span>Account Created</div> <div class="v-step current"><span>2</span>Verify Email</div> <div class="v-step"><span>3</span>Setup Profile</div> </div> <style> .v-steps { display: flex; flex-direction: column; gap: 1rem; } .v-step { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.9rem; font-weight: 600; } .v-step span { width: 24px; height: 24px; background: #1e293b; display: grid; place-items: center; border-radius: 50%; font-size: 0.7rem; border: 1px solid #334155; } .current { color: #fff; } .current span { background: #6366f1; border-color: #6366f1; box-shadow: 0 0 10px rgba(99,102,241,0.4); } .done span { background: #10b981; border-color: #10b981; color: #fff; } </style>

Información Rápida

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