Alert и AlertDialog

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

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

Оба компонента обеспечивают:

  • Управление состоянием отображения (открыт/закрыт).
  • Стилизованное оформление, соответствующее дизайн-системе библиотеки.
  • Поддержку анимаций появления и скрытия.
  • Управление фокусом для обеспечения доступности (A11y).

Alert

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

Props

  • type — тип сообщения: success, info, warning, error. Определяет визуальное оформление.
  • title — заголовок сообщения.
  • description — подробное описание.
  • closable — булевое значение, разрешающее закрытие сообщения пользователем.
  • duration — время отображения в миллисекундах (для автоматического закрытия).

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

<script>
  import { Alert } from 'sveltekit-ui';
</script>

<Alert type="warning" title="Внимание!" description="Ваш сеанс скоро истечет" closable={true} duration={5000} />

В этом примере создается предупреждение с возможностью закрытия и автоматическим исчезновением через 5 секунд.

Поведение и стилизация

  • Стилизация обычно определяется через CSS-переменные библиотеки.
  • Анимация появления может включать fade-in или slide-in эффекты.
  • Для длинных сообщений можно добавлять скроллинг внутри компонента.

Доступность

  • Компонент автоматически устанавливает роль alert для экранных читалок.
  • Закрывающая кнопка доступна через клавишу Tab и может быть активирована Enter или Space.

AlertDialog

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

Структура

Основные элементы:

  1. Trigger — кнопка или событие, вызывающее диалог.
  2. Overlay — затемненный фон под модальным окном.
  3. Content — основной блок с заголовком, описанием и кнопками действий.
  4. Actions — набор кнопок для подтверждения или отмены (Confirm, Cancel).

Props

  • isOpen — управляет состоянием модального окна.
  • onOpenChange — колбэк при изменении состояния.
  • leastDestructiveRef — элемент, который получает фокус при открытии (обычно кнопка отмены).
  • title — заголовок диалога.
  • description — описание действия, требующего подтверждения.

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

<script>
  import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogAction, AlertDialogCancel } from 'sveltekit-ui';
  let open = false;
</script>

<AlertDialog bind:isOpen={open}>
  <AlertDialogTrigger>
    <button>Удалить запись</button>
  </AlertDialogTrigger>
  
  <AlertDialogContent title="Подтвердите удаление" description="Вы действительно хотите удалить эту запись?">
    <AlertDialogCancel>Отмена</AlertDialogCancel>
    <AlertDialogAction>Удалить</AlertDialogAction>
  </AlertDialogContent>
</AlertDialog>

В этом примере модальный диалог открывается по нажатию кнопки и предлагает пользователю подтвердить или отменить действие.

Поведение и доступность

  • При открытии диалога фокус автоматически перемещается на элемент, указанный в leastDestructiveRef.
  • Закрытие диалога происходит по нажатию кнопки отмены, подтверждения, клику вне окна или клавише Escape.
  • Диалог блокирует взаимодействие с остальной страницей до закрытия (modal behavior).
  • Экранные читалки воспринимают его как role="alertdialog", что обеспечивает корректное уведомление пользователя о необходимости действия.

Стилизация и кастомизация

  • Поддерживаются кастомные классы для заголовка, описания и кнопок.
  • Возможны различные анимации появления: fade, scale, slide.
  • Кнопки действий можно оформить в соответствии с дизайн-системой: primary, secondary, destructive.

Рекомендации по использованию

  • Alert подходит для уведомлений, не требующих действия: успех операции, информация или предупреждение.

  • AlertDialog подходит для критических операций, где важно явное подтверждение пользователя.

  • Для обеих компонент соблюдается принцип доступности и фокус-менеджмента.

  • Использование этих компонентов совместно с состоянием Svelte (bind:) позволяет легко интегрировать их в динамичные интерфейсы.

  • Стилизация через переменные библиотеки обеспечивает единый визуальный язык для всего приложения.

  • Использование анимаций улучшает пользовательский опыт, делая появление и исчезновение уведомлений более плавным.

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

Оглавление