Angular 模态框组件 | ng-hub-ui-modal

无障碍的 Angular 模态框组件，支持堆叠、全屏模式、模板、键盘处理和 CSS 变量，适用于 standalone 应用。

交互式示例

探索实时示例，了解该库在常见 Angular 用例中的表现。

Modal 内容类型

The open() method accepts various content types:

配置选项

Sizes:
Position:
Behavior:
Content:

Modal 位置

通过 modal 引用进行控制

活动 modal（自关闭）

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

类型化数据载荷

堆叠的 modals

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

全屏 modal

内容投影

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.