Модальные окна toastfeedbackstack

Stacked Toast Center

Менеджер стопки всплывающих уведомлений в углу экрана с таймером закрытия.

✓ Profile updated!

✕ Failed to sync changes.

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

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

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

<ToastStackOverlay>Content</ToastStackOverlay>

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

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

---
---
<div class="toast-stack">
  <div class="toast-mini success">Profile updated!</div>
  <div class="toast-mini error">Failed to sync changes.</div>
</div>
<style>
  .toast-stack { position: fixed; top: 2rem; right: 2rem; z-index: 5000; display: flex; flex-direction: column; gap: 0.75rem; }
  .toast-mini { background: #111; color: #fff; padding: 0.75rem 1.5rem; border-radius: 10px; border-left: 4px solid #333; font-size: 0.85rem; box-shadow: 0 10px 30px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); }
  .success { border-left-color: #10b981; }
  .error { border-left-color: #ef4444; }
</style>

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

Категория: Модальные окна
Имя файла: StackedToastCenter.astro
Зависимости: Нет — чистый Astro + CSS
Теги: toastfeedbackstack

Живое превью

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

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

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