ComposedModal для сложных модалок

ComposedModal — это компонент библиотеки Carbon Components Svelte, предназначенный для построения сложных модальных окон с богатой структурой и управляемым поведением. В отличие от простых модальных окон (Modal), ComposedModal позволяет разделять содержимое на несколько логических секций, управлять действиями пользователя и обеспечивать согласованное взаимодействие с интерфейсом.

Основная структура ComposedModal

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

  1. ComposedModal — корневой контейнер модального окна.
  2. ModalHeader — заголовок модалки.
  3. ModalBody — основной контент.
  4. ModalFooter — блок с кнопками действий, такими как “Закрыть” или “Сохранить”.

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






  
  
    
Это тело модального окна. Здесь может быть любой контент: формы, таблицы, изображения.

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

Управление открытием и закрытием

ComposedModal предоставляет следующие события:

  • on:open — срабатывает при открытии модалки.
  • on:close — срабатывает при закрытии.
  • on:submit — срабатывает при подтверждении действия (если предусмотрена кнопка подтверждения).

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

 console.log("Модалка открыта")}
  on:close={() => console.log("Модалка закрыта")}
  on:submit={() => console.log("Подтверждение действия")}
>
  
  
    
Тело модального окна с событиями.

Использование события submit особенно полезно при работе с формами внутри модального окна, так как позволяет централизованно обрабатывать данные без привязки к конкретным кнопкам.

Работа с формами внутри модалки

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

Пример формы:

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

  • Поля формы привязаны через bind:value.
  • Подтверждение формы через on:submit позволяет централизованно обрабатывать данные и закрывать модальное окно.

Расширенные возможности и настройки

  • danger — свойство, позволяющее выделить действия с потенциально опасными последствиями (например, удаление данных).
  • size — позволяет изменять размер модального окна (sm, md, lg), что важно для отображения больших таблиц или сложных форм.

  ...
  • selectorPrimaryFocus — задает элемент, который получит фокус при открытии модалки, улучшая доступность и навигацию с клавиатуры.

  ...

Вложенные модальные окна и кастомизация

ComposedModal допускает вложенность для создания пошаговых процессов. Вложенные модалки должны управляться отдельными состояниями open и правильно обрабатывать закрытие верхнего уровня, чтобы избежать конфликтов интерфейса.

Пример двухуровневой модалки:






  
  
    
  
  
    
  



  
  
    
Дополнительный шаг процесса.

Важно: вложенные модалки не блокируют родительское окно, если нужно избежать взаимодействия с ним, следует использовать фоновые блоки или дополнительные состояния блокировки.

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

  • class — позволяет добавлять собственные CSS-классы к модальному окну.
  • modalClass — отдельное свойство для добавления стилей к самой модалке без изменения обертки.

  ...
  • Все внутренние компоненты поддерживают кастомизацию через class и стандартные CSS-переменные Carbon.

Лучшие практики использования

  1. Разделять ModalHeader, ModalBody и ModalFooter для логической структуры.
  2. Использовать bind:open и события on:submit, on:close для управления состоянием модалки.
  3. Применять selectorPrimaryFocus для доступности.
  4. Минимизировать вложенность модальных окон или обрабатывать их через отдельные состояния.
  5. Кастомизировать размеры и стили модалки в зависимости от контента.
Оглавление