Dialog и Sheet

В библиотеке SvelteKit UI Libs компоненты Dialog и Sheet представляют собой фундаментальные элементы для создания модальных окон и выдвижных панелей. Они позволяют структурировать пользовательский интерфейс, управлять состоянием отображения и обеспечивают удобное взаимодействие с пользователем.

Dialog

Dialog — это компонент модального окна, который используется для отображения информации, подтверждений, форм или других интерактивных элементов поверх основного контента.

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

  • open (boolean) — управляет видимостью окна.
  • on:open и on:close — события открытия и закрытия модального окна.
  • modal (boolean) — если true, блокирует взаимодействие с остальной страницей до закрытия.
  • trapFocus (boolean) — обеспечивает удержание фокуса внутри диалогового окна.

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

<script>
  import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from 'sveltekit-ui';

  let isOpen = false;

  function handleClose() {
    isOpen = false;
  }
</script>

<Dialog bind:open={isOpen} modal trapFocus>
  <DialogTrigger>
    <button>Открыть диалог</button>
  </DialogTrigger>
  
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Подтверждение действия</DialogTitle>
      <DialogDescription>Вы действительно хотите удалить элемент?</DialogDescription>
    </DialogHeader>
    
    <DialogFooter>
      <button on:click={handleClose}>Отмена</button>
      <button on:click={() => { /* логика удаления */ handleClose(); }}>Удалить</button>
    </DialogFooter>
  </DialogContent>
</Dialog>

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

  • Автоматическая анимация появления и скрытия через встроенные transition.
  • Поддержка вложенных Dialog-окон.
  • Возможность кастомизации через слоты: Header, Footer, Title, Description, Content.

Sheet

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

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

  • side ("top" | "bottom" | "left" | "right") — определяет сторону, с которой появляется панель.
  • size ("sm" | "md" | "lg" | "full") — размер выдвижной панели.
  • open (boolean) — управляет состоянием панели.
  • on:open и on:close — события изменения состояния.

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

<script>
  import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from 'sveltekit-ui';

  let sheetOpen = false;
</script>

<Sheet bind:open={sheetOpen} side="right" size="md">
  <SheetTrigger>
    <button>Открыть панель</button>
  </SheetTrigger>
  
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Фильтры поиска</SheetTitle>
      <SheetDescription>Настройте параметры для точного поиска</SheetDescription>
    </SheetHeader>

    <!-- Основной контент панели -->
    <div>
      <label>
        Категория:
        <select>
          <option>Все</option>
          <option>Продукты</option>
          <option>Услуги</option>
        </select>
      </label>
    </div>

    <SheetFooter>
      <button on:click={() => sheetOpen = false}>Закрыть</button>
      <button on:click={() => { /* логика фильтра */ sheetOpen = false; }}>Применить</button>
    </SheetFooter>
  </SheetContent>
</Sheet>

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

  • Полная интеграция с адаптивной версткой.
  • Поддержка анимаций выдвижения с любой стороны.
  • Легкая кастомизация через слоты Header, Footer, Title, Description и Content.
  • Возможность комбинирования с компонентами формы или списков внутри панели.

Сравнение Dialog и Sheet

Характеристика Dialog Sheet
Использование Модальные окна, подтверждения Выдвижные панели, боковые меню
Анимация Появление/скрытие с затемнением фона Сдвиг с выбранной стороны
Фокус Фокус удерживается внутри окна Фокус может оставаться на странице
Размер Фиксированный или настраиваемый Мелкий, средний, большой, полный
Адаптивность Хорошо для диалогов Отлично для мобильных и десктопных

Практические советы

  • Для Dialog оптимально использовать для критичных подтверждений и всплывающих форм.
  • Для Sheet удобно использовать для второстепенных действий, фильтров или панели инструментов.
  • Оба компонента поддерживают двустороннее связывание состояния через bind:open.
  • Слоты позволяют полностью кастомизировать визуальное содержание, сохраняя базовую логику модального поведения.
  • Комбинирование Dialog внутри Sheet или наоборот дает гибкость для сложных интерфейсов с несколькими уровнями модальности.

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

Оглавление