Dialogs

Диалоговые окна (Dialogs) в SvelteKit UI — это компоненты, предназначенные для взаимодействия с пользователем, отображения уведомлений, подтверждений действий или форм ввода. Они строятся с учетом реактивности и возможности управления состоянием через Svelte-стейт.

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

Типичный компонент диалога состоит из нескольких ключевых элементов:

  1. Обёртка диалога Используется основной компонент <Dialog> или <DialogRoot> в зависимости от выбранной библиотеки. Он контролирует видимость и состояние модального окна.

    <Dialog bind:open={isOpen}>
    <DialogOverlay />
    <DialogContent>
        <h2>Подтверждение действия</h2>
        <p>Вы уверены, что хотите удалить элемент?</p>
        <DialogActions>
            <button on:click={confirm}>Да</button>
            <button on:click={() => isOpen = false}>Нет</button>
        </DialogActions>
    </DialogContent>
</Dialog>

    Ключевые моменты:

    • bind:open связывает состояние открытия диалога с переменной, что позволяет управлять показом программно.
    • <DialogOverlay> затемняет фон и перехватывает клики вне диалога.
    • <DialogContent> содержит основной контент диалога.
    • <DialogActions> формирует блок с кнопками управления.

  2. Состояние открытия и закрытия Управление осуществляется через реактивные переменные Svelte:

    <script>
    let isOpen = false;

    function confirm() {
        // логика подтверждения
        isOpen = false;
    }
</script>

    Важно поддерживать синхронизацию состояния, чтобы диалог корректно закрывался и открывался при любых сценариях.

Варианты использования

  • Подтверждение действий Используется для критических операций (удаление, сброс данных). Важно минимизировать количество кликов для пользователя, чтобы не создавать лишние шаги.

  • Формы ввода Диалог можно использовать как контейнер для формы. Рекомендуется использовать реактивные переменные для двухстороннего связывания полей ввода и состояния компонента.

    <Dialog bind:open={formOpen}>
    <DialogOverlay />
    <DialogContent>
        <form on:submit|preventDefault={submitForm}>
            <label>
                Имя:
                <input type="text" bind:value={name} />
            </label>
            <DialogActions>
                <button type="submit">Отправить</button>
                <button type="button" on:click={() => formOpen = false}>Отмена</button>
            </DialogActions>
        </form>
    </DialogContent>
</Dialog>

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

  • Фокусировка элементов После открытия диалога желательно устанавливать фокус на первый интерактивный элемент. Это обеспечивается встроенными механизмами Dialog или с помощью autofocus.

  • Закрытие по Escape и клику вне окна Обычно включается через свойства closeOnEsc и closeOnOutsideClick, что улучшает UX.

  • ARIA-атрибуты Компоненты SvelteKit UI автоматически добавляют role="dialog" и aria-modal="true", обеспечивая доступность для скринридеров.

Настройка стилей и анимаций

  • Переопределение стилей Стандартные классы <DialogContent> и <DialogOverlay> позволяют задавать кастомные стили через Tailwind, CSS-модули или глобальные классы.

  • Анимации Для плавного появления и скрытия используют стандартные переходы Svelte:

    <DialogContent transition:fade>
    ...
</DialogContent>

    Можно комбинировать fade, slide или создавать свои кастомные анимации с использованием transition:fly.

Композиция с другими компонентами

Диалоговые окна легко интегрируются с другими компонентами SvelteKit UI:

  • Notifications – диалог может запускать уведомления после подтверждения действия.
  • Buttons и Icons – кнопки управления и иконки закрытия легко вставляются в <DialogActions> и <DialogContent> для улучшения UX.
  • Form Elements – реактивные формы внутри диалога используют все возможности SvelteKit UI для валидации и состояния полей.

Программное управление

Можно открывать и закрывать диалог не только через привязку к переменной, но и с помощью методов:

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

    function openDialog() {
        dialogStore.open('unique-dialog-id');
    }

    function closeDialog() {
        dialogStore.close('unique-dialog-id');
    }
</script>

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

Лучшие практики

  • Всегда использовать <DialogOverlay> для предотвращения взаимодействия с фоном.
  • Поддерживать реактивность состояния для контроля открытия и закрытия.
  • Добавлять анимации для повышения визуального восприятия.
  • Следить за доступностью и корректными ARIA-атрибутами.
  • Разделять контент диалога и действия, чтобы код оставался читаемым и масштабируемым.

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

Оглавление