Dialog

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

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

Dialog состоит из нескольких элементов:

  1. DialogTrigger – элемент, который инициирует открытие модального окна. Обычно это кнопка или ссылочный элемент.
  2. DialogContent – основная область содержимого окна. Сюда помещается текст, формы, кнопки и другие UI-элементы.
  3. DialogHeader и DialogFooter – необязательные блоки для структурирования диалога: заголовок, подзаголовок, кнопки подтверждения или отмены.
  4. DialogClose – элемент, который закрывает окно. Может быть кнопкой “Закрыть”, крестиком или любым интерактивным компонентом.

Ключевые особенности:

  • Поддержка фокус-трекинга и возвращение фокуса к элементу-триггеру после закрытия.
  • Управление состоянием через локальный стейт Svelte (let open = false) или через store для глобального контроля.
  • Полная интеграция с анимациями и переходами Svelte (transition:fade, transition:slide).
  • Поддержка вложенных диалогов и динамического контента.

Пример базового диалога

<script>
  import { Dialog, DialogTrigger, DialogContent, DialogClose } from '@sveltekit/ui';
  let open = false;
</script>

<Dialog bind:open>
  <DialogTrigger>
    <button>Открыть диалог</button>
  </DialogTrigger>
  
  <DialogContent>
    <h2>Заголовок диалога</h2>
    <p>Здесь размещается основной контент модального окна.</p>
    <DialogClose>
      <button>Закрыть</button>
    </DialogClose>
  </DialogContent>
</Dialog>

Особенности примера:

  • Связывание состояния через bind:open обеспечивает двустороннее управление открытием и закрытием окна.
  • Компонент DialogTrigger автоматически связывается с DialogContent, что избавляет от необходимости вручную писать обработчики событий.
  • DialogClose можно использовать внутри контента, чтобы закрыть окно программно.

Работа с формами и действиями внутри Dialog

Диалог часто используется для подтверждения действий или ввода данных. В SvelteKit UI можно удобно интегрировать формы:

<Dialog bind:open>
  <DialogTrigger>
    <button>Добавить пользователя</button>
  </DialogTrigger>
  
  <DialogContent>
    <h2>Новый пользователь</h2>
    <form on:submit|preventDefault={handleSubmit}>
      <input type="text" placeholder="Имя" bind:value={name} required />
      <input type="email" placeholder="Email" bind:value={email} required />
      <button type="submit">Сохранить</button>
      <DialogClose>
        <button>Отмена</button>
      </DialogClose>
    </form>
  </DialogContent>
</Dialog>

<script>
  let name = '';
  let email = '';

  function handleSubmit() {
    console.log({ name, email });
    open = false; // закрытие диалога после отправки формы
  }
</script>

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

  • Использование on:submit|preventDefault предотвращает перезагрузку страницы.
  • Доступ к состоянию формы через Svelte bind облегчает обработку данных.
  • Диалог можно закрыть как после успешного действия, так и через кнопку DialogClose.

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

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

<Dialog bind:open={firstOpen}>
  <DialogTrigger>
    <button>Первый диалог</button>
  </DialogTrigger>
  <DialogContent>Контент первого диалога</DialogContent>
</Dialog>

<Dialog bind:open={secondOpen}>
  <DialogTrigger>
    <button>Второй диалог</button>
  </DialogTrigger>
  <DialogContent>Контент второго диалога</DialogContent>
</Dialog>

Советы по управлению:

  • Для сложных интерфейсов рекомендуется использовать Svelte store, чтобы централизованно контролировать открытие всех диалогов.
  • При вложенных диалогах важно корректно управлять фокусом, чтобы пользователь не потерялся между окнами.

Анимации и стилизация

Диалоги можно кастомизировать с помощью Svelte-переходов и классов:

<DialogContent transition:slide={{ duration: 200 }} class="bg-white p-6 rounded-lg shadow-lg">
  <h2 class="text-lg font-bold mb-4">Заголовок</h2>
  <p>Контент с анимацией появления.</p>
</DialogContent>

Возможности:

  • transition:fade, transition:slide, transition:scale – базовые анимации открытия/закрытия.
  • Стилизация через Tailwind или обычные CSS-классы.
  • Возможность добавления пользовательских анимаций через Svelte motion.

Доступность (Accessibility)

SvelteKit UI библиотеки обеспечивают встроенную поддержку ARIA-атрибутов:

  • role="dialog" и aria-modal="true" для корректного восприятия экранными читалками.
  • Автоматическое управление фокусом и табуляцией.
  • Возможность закрытия диалога с клавиатуры (Escape) без дополнительного кода.

Динамический контент и условные диалоги

Диалоги могут загружать контент динамически, например через API-запросы:

{#if open}
  <DialogContent>
    {#await fetchUserData() then data}
      <p>Имя: {data.name}</p>
      <p>Email: {data.email}</p>
    {:catch error}
      <p>Ошибка загрузки данных</p>
    {/await}
  </DialogContent>
{/if}

Преимущества:

  • Диалог открывается только после готовности данных.
  • Возможность показывать спиннеры и индикаторы загрузки.
  • Упрощение управления состоянием без лишнего рендеринга.

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

  • Всегда использовать DialogTrigger и DialogClose для корректного управления состоянием и фокусом.
  • Динамический контент и формы легко интегрируются через Svelte bind и обработчики событий.
  • Анимации и стилизация делают интерфейс более живым, но не должны нарушать доступность.
  • Для сложных приложений с несколькими диалогами рекомендуется использовать централизованное состояние через store.

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

Оглавление