Alert Dialog

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

Структура компонента Alert Dialog

Компонент состоит из нескольких ключевых элементов:

Trigger — элемент, который инициирует открытие диалога. Обычно это кнопка или иконка.
Overlay — затемнённый фон, который блокирует взаимодействие с остальной частью интерфейса.
Content — центральная панель диалога, содержащая заголовок, описание и элементы управления.
Actions — кнопки для подтверждения или отмены действия.

Пример базовой структуры:

<AlertDialog>
  <AlertDialogTrigger>
    <button>Удалить запись</button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Вы уверены?</AlertDialogTitle>
      <AlertDialogDescription>
        Это действие нельзя будет отменить.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Отмена</AlertDialogCancel>
      <AlertDialogAction>Удалить</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

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

open — булево значение, контролирующее видимость диалога. Может быть связано с bind:open.
on:openChange — событие, вызываемое при открытии или закрытии диалога. Используется для синхронизации состояния.
initialFocus — элемент, который получает фокус при открытии диалога, повышая доступность.

Пример управления через переменную:

<script>
  let isDialogOpen = false;
</script>

<AlertDialog bind:open={isDialogOpen}>
  <AlertDialogTrigger>
    <button>Показать предупреждение</button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Важное сообщение</AlertDialogTitle>
      <AlertDialogDescription>
        Пожалуйста, подтвердите действие.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel on:click={() => isDialogOpen = false}>Отмена</AlertDialogCancel>
      <AlertDialogAction on:click={() => console.log('Действие подтверждено')}>
        Подтвердить
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Доступность и фокусировка

SvelteKit UI обеспечивает автоматическое управление фокусом и блокировку фона для Alert Dialog. Ключевые моменты:

Диалог всегда получает фокус при открытии.
Клавиша Escape автоматически закрывает диалог.
Tab-переходы ограничиваются элементами внутри диалога, предотвращая взаимодействие с контентом под overlay.
initialFocus позволяет назначить конкретный элемент для фокуса, например кнопку подтверждения.

<AlertDialogContent initialFocus={confirmButton}>
  <button bind:this={confirmButton}>Подтвердить</button>
</AlertDialogContent>

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

SvelteKit UI поддерживает полную кастомизацию:

Цвета и размеры задаются через классы CSS или Tailwind-подобные утилиты.
Анимации открывания и закрывания легко интегрируются через transition или motion библиотеки.
Иконки и дополнительные элементы можно добавлять внутри AlertDialogHeader или AlertDialogFooter.

Пример с Tailwind:

<AlertDialogContent class="bg-white rounded-lg shadow-lg p-6">
  <AlertDialogHeader>
    <AlertDialogTitle class="text-xl font-semibold text-red-600">Удаление</AlertDialogTitle>
    <AlertDialogDescription class="text-gray-500">
      Вы действительно хотите удалить этот элемент? Это действие необратимо.
    </AlertDialogDescription>
  </AlertDialogHeader>
  <AlertDialogFooter>
    <AlertDialogCancel class="px-4 py-2 bg-gray-200 rounded">Отмена</AlertDialogCancel>
    <AlertDialogAction class="px-4 py-2 bg-red-600 text-white rounded">Удалить</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

Работа с динамическими данными

Alert Dialog может принимать динамические заголовки, описания и действия. Это позволяет использовать один компонент для различных сценариев:

<script>
  let dialogConfig = {
    title: 'Удаление записи',
    description: 'Эта запись будет безвозвратно удалена.',
    actionText: 'Удалить'
  };
</script>

<AlertDialog>
  <AlertDialogTrigger>
    <button>Удалить</button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>{dialogConfig.title}</AlertDialogTitle>
      <AlertDialogDescription>{dialogConfig.description}</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Отмена</AlertDialogCancel>
      <AlertDialogAction>{dialogConfig.actionText}</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

События и интеграция с логикой приложения

Alert Dialog легко интегрируется с бизнес-логикой:

Использование событий on:openChange для изменения состояния приложения.
Вызов функций внутри AlertDialogAction для выполнения подтверждённых действий.
Комбинация с хранилищами Svelte (store) для централизованного управления состоянием диалогов.

<script>
  import { writable } from 'svelte/store';
  const dialogOpen = writable(false);

  function confirmDeletion() {
    console.log('Удаление подтверждено');
    dialogOpen.set(false);
  }
</script>

<AlertDialog bind:open={$dialogOpen}>
  <AlertDialogTrigger>
    <button>Удалить запись</button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Подтвердите удаление</AlertDialogTitle>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Отмена</AlertDialogCancel>
      <AlertDialogAction on:click={confirmDeletion}>Удалить</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>