ToastNotification для всплывающих сообщений

ToastNotification — компонент для отображения временных всплывающих сообщений, которые информируют пользователя о состоянии системы, результатах действий или ошибках. В библиотеке Carbon Components Svelte он реализован с полным соблюдением принципов доступности и гибкости настройки.

Подключение и импорт

Для использования ToastNotification необходимо импортировать его из пакета carbon-components-svelte:

Здесь showToast управляет видимостью уведомления.

Основные свойства

ToastNotification поддерживает следующие ключевые свойства:

kind — тип уведомления. Возможные значения:
- 'error' — сообщение об ошибке
- 'info' — информационное сообщение
- 'success' — подтверждение успешного действия
- 'warning' — предупреждение
title — заголовок уведомления
subtitle — подзаголовок или дополнительный текст
timeout — время автоматического закрытия в миллисекундах. Если не указано, уведомление остаётся на экране до закрытия вручную.
on:close — событие, срабатывающее при закрытии уведомления

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

 showToast = false}
/>

Управление видимостью

ToastNotification в Svelte удобно контролировать через условный рендеринг:

{#if showToast}
   showToast = false}
  />
{/if}

Использование переменной состояния позволяет легко интегрировать уведомления в логику приложения.

Варианты дизайна и кастомизация

ToastNotification поддерживает различные стили и модификаторы:

Разные размеры: стандартный размер по умолчанию, для компактного уведомления используется свойство lowContrast.
Закрытие пользователем: автоматически добавляется кнопка закрытия, её можно скрыть с помощью hideCloseButton.
Иконки: компонент автоматически отображает иконку в зависимости от значения kind. Для кастомной иконки используется слот icon.

Пример с кастомной иконкой:

Анимации и плавное появление

В Carbon Components Svelte уведомления автоматически используют плавное появление и исчезновение, чтобы не создавать резких переходов на интерфейсе. Для дополнительного контроля анимации можно использовать Svelte transitions:

{#if showToast}
   showToast = false}
    transition:fade={{ duration: 400 }}
  />
{/if}

Управление несколькими уведомлениями

Для организации нескольких уведомлений можно использовать массив объектов и цикл #each:



{#each notifications as n (n.id)}
   removeNotification(n.id)}
  />
{/each}

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

Доступность

Компонент полностью соответствует требованиям доступности:

Использует роли alert для мгновенного оповещения пользователей с помощью экранных читалок.
При закрытии уведомления фокус корректно возвращается к предыдущему элементу интерфейса.
Поддерживаются клавиатурные события для закрытия через Esc или Enter.