PassiveModal без действий

PassiveModal представляет собой модальное окно, которое используется для отображения информации без необходимости взаимодействия с пользователем через кнопки действия. Этот компонент идеально подходит для уведомлений, предупреждений или вспомогательной информации, где требуется лишь прочтение контента. В Carbon Components Svelte PassiveModal полностью соответствует стилю IBM Carbon Design System и обеспечивает единообразный пользовательский опыт.

Импорт и базовая структура

Для начала необходимо импортировать компонент PassiveModal из библиотеки:

<script>
  import { PassiveModal } from 'carbon-components-svelte';
  let open = false;
</script>

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

  • open (boolean) — определяет состояние модального окна (открыто или закрыто).
  • modalLabel (string) — текст метки модального окна, отображаемый в верхней части.
  • modalHeading (string) — заголовок модального окна.
  • passiveModalBody (string) — содержимое модального окна.

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

<PassiveModal
  bind:open
  modalLabel="Информация"
  modalHeading="Важно"
  passiveModalBody="Это уведомление носит информативный характер и не требует действий."
/>

<button on:click={() => open = true}>Открыть модальное окно</button>

В данном примере модальное окно открывается при нажатии кнопки и автоматически закрывается по клику вне него или при нажатии клавиши Esc.

Особенности работы PassiveModal

PassiveModal отличается от стандартного Modal отсутствием кнопок действий (например, «Подтвердить» или «Отмена»). Это упрощает взаимодействие и делает компонент удобным для быстрого информирования пользователя.

  • Закрытие окна происходит через:

    • нажатие на фон за модальным окном;
    • нажатие клавиши Esc;
    • программное управление через bind:open.

  • Адаптивность: модальное окно автоматически подстраивается под размеры экрана и поддерживает мобильные устройства.

Кастомизация внешнего вида

PassiveModal позволяет изменять стили через стандартные CSS-классы Carbon:

  • bx–modal — базовый класс модального окна.
  • bx–modal-container — контейнер содержимого.
  • bx–modal-header — заголовок модального окна.
  • bx–modal-content — тело модального окна.

Пример кастомного стиля:

<style>
  .custom-modal .bx--modal-container {
    background-color: #f4f4f4;
    padding: 2rem;
  }
  .custom-modal .bx--modal-header {
    color: #0f62fe;
    font-size: 1.5rem;
  }
</style>

<PassiveModal
  class="custom-modal"
  bind:open
  modalLabel="Статус системы"
  modalHeading="Оповещение"
  passiveModalBody="Система обновлена и работает корректно."
/>

Контроль состояния модального окна

С помощью привязки свойства bind:open модальное окно можно управлять программно. Это особенно полезно при интеграции PassiveModal с логикой приложения:

<script>
  import { PassiveModal } from 'carbon-components-svelte';
  let open = false;

  function showNotification() {
    open = true;
    setTimeout(() => open = false, 5000); // Автоматическое закрытие через 5 секунд
  }
</script>

<PassiveModal
  bind:open
  modalLabel="Обновление"
  modalHeading="Информация"
  passiveModalBody="Новые данные успешно загружены."
/>

<button on:click={showNotification}>Показать уведомление</button>

Такой подход позволяет реализовать автоматические уведомления без участия пользователя.

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

PassiveModal полностью поддерживает ARIA-атрибуты для обеспечения доступности:

  • role=“dialog” — обозначает модальное окно как диалоговое.
  • aria-modal=“true” — указывает, что модальное окно блокирует фон.
  • aria-labelledby и aria-describedby — связывают заголовок и тело с модальным окном, облегчая навигацию с помощью экранных читалок.

Использование этих атрибутов делает PassiveModal соответствующим стандартам WCAG.

Резюме ключевых возможностей PassiveModal

  • Отображение информации без действий пользователя.
  • Простое управление состоянием через bind:open.
  • Поддержка кастомизации через CSS-классы Carbon.
  • Полная адаптивность и доступность (ARIA).
  • Возможность автоматического закрытия и программного контроля.

PassiveModal является мощным инструментом для отображения уведомлений и информационных сообщений в интерфейсах на Svelte, сохраняя единый стиль Carbon Design System и обеспечивая высокую степень удобства для пользователей.

Оглавление