Компонент Modal для Angular | ng-hub-ui-modal

Доступный компонент modal для Angular с наложением, полноэкранным режимом, шаблонами, обработкой клавиатуры и CSS-переменными для standalone-приложений.

Интерактивные примеры

Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.

Типы контента модального окна

The open() method accepts various content types:

Опции настройки

Sizes:

Position:

Behavior:

Content:

Размещение модального окна

Centered: true

Управление через ссылку на модальное окно

Активное модальное окно (самозакрытие)

This example opens a component (not a template) that injects HubActiveModal.

Типизированная передача данных

Наложенные модальные окна

HubModal supports multiple stacked modals. The last modal has focus.

Полноэкранное модальное окно

Проекция контента

This example demonstrates how to create reusable wrapper components for modal content.

Именованный слот тела

The body used to be the one slot with no name — whatever survived the header and the footer being taken out. bodySelector gives it one, so the order the content happens to be written in stops deciding what the body is.

Nothing is ever dropped: what no selector claims still follows the named body.

Стилизация через переменные CSS

Open a modal themed with --hub-modal-* variables.