Snackbars

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

Ключевые характеристики snackbars:

  • Временное отображение — обычно 3–5 секунд, после чего уведомление автоматически скрывается.
  • Минимальное вмешательство в интерфейс — не перекрывают основной контент полностью, появляются поверх него.
  • Интерактивность — возможность включения кнопок действий (например, отмена, повтор).

Подключение UI-библиотеки и базовая настройка

Для работы со snackbar в SvelteKit необходимо установить выбранную UI-библиотеку. Например, svelte-material-ui:

npm install @smui/snackbar

Импорт компонента в Svelte:

<script>
  import Snackbar from '@smui/snackbar';
  let open = false;
  let message = '';
</script>

<Snackbar bind:open>
  {message}
</Snackbar>

Пояснения:

  • open — булев флаг, управляющий видимостью snackbar.
  • message — текст уведомления.
  • bind:open позволяет автоматически отслеживать закрытие snackbar и синхронизировать состояние.

Для появления уведомления достаточно изменить переменные:

<button on:click={() => { message = 'Данные сохранены'; open = true; }}>
  Показать уведомление
</button>

Настройка позиции и поведения

Snackbars могут располагаться в разных местах экрана: снизу, сверху, по центру. В большинстве библиотек это настраивается через пропсы:

<Snackbar bind:open position="bottom-center" timeout={4000}>
  {message}
</Snackbar>
  • position: значения могут включать bottom-left, bottom-center, bottom-right, top-left и т.д.
  • timeout: длительность отображения в миллисекундах.

Типы уведомлений и стилизация

Snackbars могут использоваться для разных типов уведомлений:

  • Информационные: нейтральный фон, стандартная иконка или без неё.
  • Успех: зелёный фон, подтверждает успешное выполнение действия.
  • Ошибка: красный фон, сигнализирует о проблеме.
  • Предупреждение: жёлтый или оранжевый, требует внимания.

Пример кастомизации через CSS-переменные и классы:

<Snackbar class="success" bind:open>
  {message}
</Snackbar>

<style>
  .success {
    --mdc-theme-surface: #4caf50;
    --mdc-theme-on-surface: #ffffff;
  }
</style>

Добавление действий и интерактивности

Snackbars часто содержат кнопки для быстрого ответа пользователя, например «Отмена» или «Повторить». В Svelte это реализуется через слоты и события:

<Snackbar bind:open>
  {message}
  <button slot="action" on:click={() => open = false}>
    Отмена
  </button>
</Snackbar>

Особенности:

  • Слот action позволяет размещать любые интерактивные элементы.
  • После нажатия на кнопку open = false snackbar закрывается мгновенно.
  • Можно добавлять несколько кнопок, используя flex-контейнер внутри слота.

Управление очередью уведомлений

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

<script>
  import { writable } from 'svelte/store';
  import Snackbar from '@smui/snackbar';

  export const snackbarQueue = writable([]);

  function showSnackbar(text) {
    snackbarQueue.update(queue => [...queue, { text, open: true }]);
  }
</script>

{#each $snackbarQueue as item (item.text)}
  <Snackbar bind:open={item.open} on:SMUI:closed={() => {
    snackbarQueue.update(q => q.filter(i => i !== item));
  }}>
    {item.text}
  </Snackbar>
{/each}

Пояснения:

  • Хранение snackbar в store позволяет централизованно управлять всеми уведомлениями.
  • Событие SMUI:closed удаляет уведомление из очереди после закрытия.
  • Каждое уведомление уникально идентифицируется ключом (item.text) или UUID для предотвращения конфликтов.

Анимации и плавные переходы

Для улучшения UX можно использовать встроенные анимации Svelte:

<Snackbar
  bind:open
  transition:slide={{ duration: 300 }}
  transition:fade={{ duration: 200 }}>
  {message}
</Snackbar>
  • slide — скользящее появление/исчезновение.
  • fade — плавное появление и исчезновение.
  • Комбинирование нескольких переходов создаёт естественный эффект.

Доступность и семантика

Snackbars должны быть доступными для всех пользователей:

  • Использовать role="status" для автоматического чтения экранными читалками.
  • Добавлять aria-live="polite" для уведомлений, которые не требуют немедленного вмешательства.
  • Контраст текста и фона должен соответствовать WCAG 2.1 стандартам.
<Snackbar role="status" aria-live="polite" bind:open>
  {message}
</Snackbar>

Интеграция с глобальными событиями приложения

Snackbars удобно использовать для уведомлений о результатах API-запросов или действий пользователя:

<script>
  import { showSnackbar } from './snackbarStore.js';

  async function saveData() {
    try {
      await api.save();
      showSnackbar('Сохранение прошло успешно');
    } catch (e) {
      showSnackbar('Ошибка при сохранении данных');
    }
  }
</script>

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

Использование глобального snackbarStore упрощает управление уведомлениями и обеспечивает единый стиль и поведение по всему приложению.

Итоговые рекомендации по использованию

  • Предоставлять минимальное, но информативное сообщение.
  • Не перегружать интерфейс множеством одновременно появляющихся snackbars.
  • Использовать последовательность очереди для предотвращения наложений.
  • Сохранять единый стиль уведомлений для всего приложения.

Snackbars в SvelteKit с современными UI-библиотеками становятся мощным инструментом для мгновенной обратной связи пользователю, при этом оставаясь лёгкими и кастомизируемыми.

Оглавление