OverlayHost 覆盖层宿主
API 总览
import { RenderBorder, RenderOverlayHost } from 'ds-ui'
RenderOverlayHost 在一个正常布局 child 上方管理覆盖层;RenderBorder 常用于为覆盖层内容提供背景、边框和内边距。
RenderOverlayHost 在当前布局区域内叠加遮罩和浮框。底层 base 正常填满宿主,overlay.child 在同一矩形内显示。它适合工作台内应用中心、局部选择器和局部阻断确认,不替代全局 popup、modal、drawer 或独立窗口。
LIVE CANVAS可运行组件示例
ON-DEMAND RUNTIME交互式示例将在进入视区时启动避免文档首屏同时初始化多个 Canvas Runtime
基本用法
const overlayPanel = new RenderBorder({ background: 'panel', cornerRadius: 8, padding: 16, child: applicationPicker,})overlayPanel.minWidth = 360overlayPanel.maxWidth = 720overlayPanel.maxHeight = 520overlayPanel.horizontalAlignment = 'center'overlayPanel.verticalAlignment = 'center' const host = new RenderOverlayHost({ base: workbenchLayout, overlayInset: 32,}) host.setOverlay({ child: overlayPanel, onRequestClose: () => host.clearOverlay({ dispose: true }),})
关闭浮层:
host.clearOverlay({ dispose: true })
如果浮层内容会被重新创建,建议关闭时传入 dispose: true。
构造参数
RenderOverlayHostOptions 继承 RenderBoxOptions:
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
base |
RenderBox |
无 | 底层内容。 |
overlay |
OverlayPanelOptions |
无 | 初始覆盖层配置。 |
scrimColor |
Color |
半透明深色 | 遮罩颜色。 |
overlayInset |
EdgeInsetsInput |
32 |
浮层可用槽位与宿主边缘的安全距离。 |
OverlayPanelOptions 只保存覆盖层关系和行为:
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
child |
RenderBox |
必填 | 覆盖层内容。 |
closeOnScrimPointerDown |
boolean |
true |
点击遮罩是否请求关闭。 |
onRequestClose |
() => void |
无 | 请求关闭回调。 |
浮层的 width/height、min/max、margin 和 alignment 都直接设置在 overlay.child 上,不在 OverlayPanelOptions 中重复声明。
方法
| 方法 | 说明 |
|---|---|
setBase(base?) |
替换底层内容;旧 base detach 但不 dispose。 |
setOverlay(overlay?) |
设置或替换覆盖层;旧 child detach。 |
clearOverlay({ dispose? } = {}) |
清空覆盖层,可选择释放 child。 |
布局和事件规则
- 宿主尺寸由父布局或宿主自身通用尺寸属性决定。
base填满宿主区域,同时遵守自身 margin。overlay.child在扣除overlayInset后按自身尺寸约束布局。- 未设置 alignment 时 overlay 默认水平、垂直居中。
- 命中测试优先 overlay child;遮罩阻止事件落到底层。
- 遮罩点击只调用
onRequestClose,业务代码决定是否真正关闭。