DirectSurface UIDirectSurface UI
开始使用
组件/布局原语

布局原语 / COMPONENT

OverlayHost

RenderOverlayHost 在一个正常布局 child 上方管理覆盖层;RenderBorder 常用于为覆盖层内容提供背景、边框和内边距。

文档 READY示例 1
PUBLIC APIRenderOverlayHost

FUNCTION EXPLORER

可运行示例与完整源码。

这里始终保留组件的主运行入口;文档中的示例用于补充具体功能说明。

LIVE EXAMPLE OVERLAY HOST
全屏
正在启动 DirectSurface UI 运行时…

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,业务代码决定是否真正关闭。

相关组件