Angular 模态框组件 | ng-hub-ui-modal
无障碍的 Angular 模态框组件，支持堆叠、全屏模式、模板、键盘处理和 CSS 变量，适用于 standalone 应用。
交互式示例
探索实时示例，了解该库在常见 Angular 用例中的表现。
Modal 内容类型
The open() method accepts various content types:
没有自由出口的对话框
Look at the top-right corner of each one. In the second dialog the button is not hidden — it is not there.
配置选项
Modal 位置
Offcanvas：紧贴边缘的抽屉
With the switch off, look at the bottom edge and at the corners on the side it slid out of.
通过 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.
Naming the header and footer slots is also what makes the library draw its own header, dismiss button included. That button ships named "Close", in English, and the library translates nothing: closeAriaLabel is how the application passes the string it has already translated — per call, as here, or once for the whole application on HubModalConfig.
具名主体插槽
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.
语义变体：一个强调色，整个对话框跟着走
The nine on the first row are the built-ins. brand is not one of them: it is six declarations in this example's own stylesheet, five of which only name another --hub-modal-accent-* role.
使用 CSS 变量设置样式
Open a modal themed with --hub-modal-* variables.