Modal и базовые модальные окна

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

Структура модального окна

Модальное окно состоит из нескольких ключевых частей:

  1. Обёртка модального окна (ModalWrapper) Используется для управления состоянием видимости модального окна и передачи настроек его поведения. Основные свойства:

    • open — булево значение, указывающее, открыто ли окно;
    • modalLabel — текст метки модального окна, обычно отображается в верхней части;
    • modalHeading — заголовок окна;
    • passiveModal — если true, окно не имеет кнопок действий, используется для информационных сообщений;
    • preventCloseOnClickOutside — запрет закрытия окна при клике вне области модального окна.

  2. Контент модального окна (Modal) Внутри располагается основной контент. Можно использовать любые Svelte-компоненты, включая формы, таблицы или кнопки.

  3. Действия пользователя В модальных окнах часто используются кнопки для подтверждения или отмены действия:

Пример базового модального окна:






  
Это содержимое модального окна. Здесь можно разместить любой HTML и Svelte-компоненты.

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

Состояние видимости модального окна в Svelte связывается через двустороннюю привязку (bind:open). Это позволяет управлять модальным окном из любого места компонента. При изменении переменной состояния компонент автоматически отображает или скрывает окно.

let isOpen = false;

// Открытие окна
function openModal() {
  isOpen = true;
}

// Закрытие окна
function closeModal() {
  isOpen = false;
}

Виды модальных окон

  1. Информационное (passiveModal) Используется для вывода уведомлений без действий. Свойство passiveModal={true} автоматически убирает кнопки в футере.

  2. Подтверждение действия Стандартное модальное окно с кнопками для подтверждения или отмены действия. В футере размещаются кнопки

  3. Формы в модальном окне Модальные окна часто содержат формы ввода. Важно использовать корректные события on:submit и предотвращать закрытие окна до успешного ввода данных.

Особенности и рекомендации

  • Фокусировка и доступность Модальные окна автоматически управляют фокусом при открытии, возвращая его к элементу, который открыл окно, после закрытия. Это важно для доступности (a11y).

  • Закрытие модального окна Carbon Components Svelte поддерживает несколько способов закрытия: кнопка отмены, клик вне окна, клавиша Escape. Свойства preventCloseOnClickOutside и on:close позволяют гибко настраивать поведение.

  • Слоты slot="footer" используется для футера с действиями пользователя. Основной контент располагается без слота, заголовок и метка задаются через свойства modalHeading и modalLabel.

  • Стилизация Библиотека предоставляет готовые стили, соответствующие Carbon Design System. Дополнительная кастомизация возможна через классы и свойства class.

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

Модальные окна удобно комбинировать с такими компонентами Carbon, как TextInput, Dropdown, DataTable и Button. Например, можно создать модальное окно с фильтром таблицы, где выбор пользователя автоматически обновляет контент основной страницы без перезагрузки.
Оглавление