Уведомления

Основы уведомлений

Уведомления в SvelteKit UI реализуются через компоненты, которые позволяют показывать пользователю краткие сообщения о событиях в приложении: успешное выполнение действия, ошибка, предупреждение или информационное уведомление. Основной принцип работы — динамическое управление состоянием компонента, чтобы уведомление появлялось и исчезало по заданным правилам.

В SvelteKit UI уведомления обычно интегрируются через store или специальные сервисы, что позволяет централизованно управлять их состоянием и обеспечивать повторное использование.

Компоненты уведомлений

Стандартная структура уведомления включает:

  • Заголовок — краткая суть уведомления.
  • Сообщение — детальное описание события.
  • Иконка — визуальная идентификация типа уведомления (успех, ошибка, предупреждение, информация).
  • Кнопка закрытия — опциональный элемент для ручного скрытия уведомления.
  • Время жизни — автоматическое скрытие уведомления через заданный период.

Пример базового компонента:

<script lang="ts">
  import { writable } from 'svelte/store';

  export const notifications = writable([]);

  export function addNotification({ title, message, type = 'info', duration = 3000 }) {
    const id = Date.now();
    notifications.update(n => [...n, { id, title, message, type }]);
    setTimeout(() => {
      notifications.update(n => n.filter(notif => notif.id !== id));
    }, duration);
  }
</script>

{#each $notifications as notif (notif.id)}
  <div class={`notification ${notif.type}`}>
    <strong>{notif.title}</strong>
    <p>{notif.message}</p>
    <button on:click={() => notifications.update(n => n.filter(n => n.id !== notif.id))}>×</button>
  </div>
{/each}

<style>
  .notification {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .notification.info { background: #edf2ff; color: #1e40af; }
  .notification.success { background: #ecfdf5; color: #065f46; }
  .notification.error { background: #fee2e2; color: #991b1b; }
  .notification.warning { background: #fffbeb; color: #92400e; }
  button { background: transparent; border: none; font-size: 1.2rem; cursor: pointer; }
</style>

Типы уведомлений

  1. Информационные (info) — используются для отображения вспомогательных сообщений без критической нагрузки.
  2. Успешные (success) — подтверждают корректное выполнение действия, например, сохранение данных.
  3. Предупреждающие (warning) — сигнализируют о потенциальных проблемах или рисках.
  4. Ошибки (error) — информируют о сбоях или невозможности завершить операцию.

Каждый тип может иметь свой цвет, иконку и поведение (например, длительность отображения).

Управление состоянием уведомлений

В SvelteKit UI для управления уведомлениями используется store, который обеспечивает реактивность и возможность подписки из любого компонента приложения. Это позволяет:

  • Централизованно добавлять уведомления из разных частей приложения.
  • Удалять уведомления вручную или автоматически.
  • Реализовать очередь уведомлений для предотвращения наложения нескольких сообщений.

Пример store:

import { writable } from 'svelte/store';

export interface Notification {
  id: number;
  type: 'info' | 'success' | 'warning' | 'error';
  title: string;
  message: string;
}

export const notifications = writable<Notification[]>([]);

export function pushNotification(notification: Omit<Notification, 'id'>) {
  const id = Date.now();
  notifications.update(current => [...current, { ...notification, id }]);
  setTimeout(() => {
    notifications.update(current => current.filter(n => n.id !== id));
  }, 4000);
}

Анимации и позиционирование

Уведомления в SvelteKit UI часто используют анимации для плавного появления и исчезновения. Наиболее распространённые эффекты:

  • Сдвиг сверху/снизу — уведомление появляется из верхней или нижней части экрана.
  • Прозрачность — постепенное появление и исчезновение.
  • Сдвиг по оси X — уведомление скользит слева направо или наоборот.
<div transition:fly="{{ y: -20, duration: 300 }}" in:fade out:fade>
  <!-- уведомление -->
</div>

Позиционирование может быть:

  • Верхний правый угол (часто используется для success/info).
  • Верхний левый угол (для предупреждений и ошибок).
  • Центр экрана (для критических сообщений).

Интеграция с SvelteKit UI библиотеки

Некоторые UI библиотеки для SvelteKit, такие как SvelteKit UI, предоставляют готовые компоненты уведомлений с встроенными стилями и анимациями. Преимущества использования таких компонентов:

  • Минимизация кастомного CSS.
  • Поддержка адаптивного дизайна и темной темы.
  • Возможность использовать типизированные функции для управления уведомлениями.

Пример использования готового компонента:

<script lang="ts">
  import { Notification, notify } from 'sveltekit-ui/notifications';

  function handleSave() {
    // логика сохранения
    notify.success({ title: 'Сохранено', message: 'Данные успешно сохранены.' });
  }
</script>

<button on:click={handleSave}>Сохранить</button>
<Notification />

Настройка и расширение

  • Время отображения можно задавать индивидуально для каждого уведомления.
  • Стиль и темы — через CSS-переменные или пропсы компонентов.
  • Кастомные действия — например, кнопки в уведомлении для отмены действия.
  • Очередь уведомлений — контролируется store, чтобы новые уведомления не перекрывали старые.

Советы по использованию

  • Уведомления должны быть краткими и информативными.
  • Не перегружать интерфейс большим количеством уведомлений одновременно.
  • Использовать разные типы для визуальной дифференциации сообщений.
  • Автоматическое скрытие уведомлений улучшает UX, особенно для информационных сообщений.

Уведомления в SvelteKit UI обеспечивают гибкость, визуальную привлекательность и удобство управления состоянием, что делает их незаменимым инструментом для современных веб-приложений.

Оглавление