Toast notifications

Основные концепции

Toast notifications — это всплывающие уведомления, которые кратковременно информируют пользователя о результатах действий, системных событиях или ошибках. В SvelteKit они реализуются через специализированные UI-библиотеки, такие как Svelte Toast, Svelte Notifications, Sveltekit UI Components, предоставляя готовые компоненты и функции для управления состоянием уведомлений.

Главные свойства toast-уведомлений:

Автоудаление: уведомление исчезает через заданный интервал времени.
Размещение: верхний/нижний правый/левый угол, центр экрана.
Типы сообщений: success, error, info, warning.
Возможность кастомизации: цвет, иконка, анимация, кнопка закрытия.

Установка и подключение

Для работы с toast в SvelteKit чаще всего используется пакет @zerodevx/svelte-toast:

npm install @zerodevx/svelte-toast

После установки компонент toast можно подключить в корневом компоненте или конкретной странице:

<script>
  import { toast } from '@zerodevx/svelte-toast';
</script>

<button on:click={() => toast.push('Успешное действие!')}>
  Показать уведомление
</button>

Основные методы

toast.push(message, options) — создаёт новое уведомление.

message — текст уведомления или Svelte-компонент.
options — объект с настройками уведомления:

toast.push('Ошибка сохранения данных', {
  theme: {
    '--toastBackground': '#f56565',
    '--toastColor': 'white'
  },
  duration: 4000,
  dismissable: true
});

theme: позволяет задавать CSS-переменные для индивидуального стиля уведомления.
duration: время отображения в миллисекундах.
dismissable: возможность закрытия пользователем вручную.

toast.pop() — удаляет последнее уведомление.
toast.popAll() — очищает все активные уведомления.

Кастомизация внешнего вида

Svelte toast поддерживает полностью настраиваемый рендеринг уведомлений. Можно создавать собственные компоненты:

<script>
  import { toast } from '@zerodevx/svelte-toast';
  import CustomToast from './CustomToast.svelte';

  function showCustomToast() {
    toast.push({
      component: CustomToast,
      props: { message: 'Настроенное уведомление', icon: '✔️' },
      duration: 5000
    });
  }
</script>

<button on:click={showCustomToast}>Показать кастомный toast</button>

В этом примере CustomToast.svelte может содержать любую структуру HTML, иконки, прогресс-бары, кнопки и т.д.

Размещение уведомлений

Для управления положением на экране используется свойство position:

toast.push('Информация', {
  position: 'bottom-left', // top-right, top-left, bottom-right, bottom-center, top-center
  duration: 3000
});

Анимации

SvelteKit UI библиотеки позволяют добавлять плавные анимации при появлении и исчезновении toast-уведомлений. Например, используя встроенные функции анимации Svelte:

import { fly, fade } from 'svelte/transition';

toast.push('Событие выполнено', {
  duration: 4000,
  intro: { transition: fly, params: { y: -50, duration: 300 } },
  outro: { transition: fade, params: { duration: 200 } }
});

intro — анимация появления.
outro — анимация исчезновения.

Группировка и управление состоянием

Некоторые библиотеки поддерживают группировку уведомлений по типу или категории:

toast.push('Файл загружен', { group: 'upload', duration: 3000 });
toast.push('Ошибка загрузки', { group: 'upload', duration: 3000 });

// Очистка только группы upload
toast.popGroup('upload');

Это удобно для управления большим количеством уведомлений, особенно при комплексных интерфейсах с множественными источниками событий.

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

<script>
  import { toast } from '@zerodevx/svelte-toast';

  function notify(type) {
    toast.push(type === 'success' ? 'Данные сохранены' : 'Ошибка при сохранении', {
      theme: {
        '--toastBackground': type === 'success' ? '#48bb78' : '#f56565',
        '--toastColor': 'white'
      },
      duration: 5000,
      dismissable: true,
      position: 'top-right'
    });
  }
</script>

<button on:click={() => notify('success')}>Успех</button>
<button on:click={() => notify('error')}>Ошибка</button>

В этом примере демонстрируется динамическая настройка темы уведомления и типовая логика для различных сценариев.