Angular Portal 与 Overlay 渲染 | ng-hub-ui-portal
Angular portal 库，可在当前 DOM 树之外动态渲染组件、模板和 overlay，并支持定位控制。
样式
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） |