Angular Portal 与 Overlay 渲染 | ng-hub-ui-portal
Angular portal 库，可在当前 DOM 树之外动态渲染组件、模板和 overlay，并支持定位控制。
API 参考
这里是 portal 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 15 个输入项精细调校 portal。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
animation | boolean | — | 若为 true，portal 的打开和关闭将带有动画。默认值：true |
ariaLabelledBy | string | — | 要设置在 portal 窗口上的 `aria-labelledby` 属性值 |
ariaDescribedBy | string | — | 要设置在 portal 窗口上的 `aria-describedby` 属性值 |
beforeDismiss | () => boolean | Promise<boolean> | — | 在 portal 即将关闭（dismiss）之前调用的回调。返回 false 可阻止关闭。 |
container | string | HTMLElement | — | 指定所有新 portal 窗口应附加到的元素的选择器。若未指定，则为 `body`。 |
injector | Injector | — | 用于 portal 内容的 `Injector`，以启用依赖注入。 |
keyboard | boolean | — | 若为 true，按下 Escape 键时 portal 将关闭。默认值：true |
scrollable | boolean | — | 可滚动的 portal 内容（默认值为 false）。 |
windowClass | string | — | 附加到 portal 窗口的自定义类，用于自定义样式和定位。 |
portalDialogClass | string | — | 附加到 portal 对话框容器的自定义类。 |
portalContentClass | string | — | 附加到 portal 内容包装器的自定义类。 |
headerSelector | string | — | portal 窗口头部元素的自定义选择器。适用于定位特定的 portal 区域。 |
footerSelector | string | — | portal 窗口底部元素的自定义选择器。适用于定位特定的 portal 区域。 |
dismissSelector | string | — | 可触发 portal 窗口关闭（dismiss）的元素的自定义选择器。默认值：`[data-dismiss="portal"]` |
closeSelector | string | — | 可触发 portal 窗口关闭（close）的元素的自定义选择器。默认值：`[data-close="portal"]` |
输出
尚未记录任何输出项。
模板
打造你自己的样式——1 个模板插槽让你可以投影自定义标记。
| 名称 | 描述 | 示例 |
|---|---|---|
Portal Template | 可传递给 HubPortal 服务用于动态渲染的模板引用 | <ng-template #portalTemplate>
<div class="portal-content">
<div class="portal-header">
<h4>Portal Title</h4>
<button data-dismiss="portal">×</button>
</div>
<div class="portal-body">
Portal content goes here
</div>
<div class="portal-footer">
<button data-dismiss="portal">Cancel</button>
<button data-close="portal">OK</button>
</div>
</div>
</ng-template>
<!-- Open the portal -->
<button (click)="portal.open(portalTemplate)">Open Portal</button> |
CSS 变量
用 15 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Portal 基础变量
用于 portal 结构和定位的核心样式变量
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--portal-zindex | 1050 | number | portal 遮罩层的 z-index |
--portal-padding | 1rem | length | portal 内容的默认内边距 |
--portal-margin | 0.5rem | length | portal 对话框周围的外边距 |
Portal 外观
控制 portal 颜色、边框和视觉效果的变量
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--portal-bg | #ffffff | color | portal 内容的背景颜色 |
--portal-color | #212529 | color | portal 内容的文本颜色 |
--portal-border-color | #dee2e6 | color | portal 的边框颜色 |
--portal-border-width | 1px | border | portal 的边框宽度 |
--portal-border-radius | 0.375rem | border | portal 圆角的边框半径 |
--portal-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | 用于 portal 立体感的阴影 |
Portal 头部与底部
用于 portal 头部和底部区域的样式变量
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--portal-header-padding | 1rem | length | portal 头部的内边距 |
--portal-header-border-color | #dee2e6 | color | portal 头部的边框颜色 |
--portal-footer-padding | 1rem | length | portal 底部的内边距 |
--portal-footer-border-color | #dee2e6 | color | portal 底部的边框颜色 |
背景遮罩与覆盖层
控制背景遮罩外观和行为的变量
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--portal-backdrop-bg | rgba(0, 0, 0, 0.5) | color | portal 背景遮罩的背景颜色 |
--portal-backdrop-zindex | 1040 | number | 背景遮罩的 z-index（必须低于 portal 的 z-index） |
样式与主题
尚未记录任何样式示例。本节将包含自定义方案和主题示例。