1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Отображение данных stepsdatavertical

Vertical Steps

Вертикальный пошаговый таймлайн с описанием выполненных и текущих задач.

CheckAccount Created
2Verify Email
3Setup Profile

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

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

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

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

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

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>

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

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