#<overlay> XElement

<overlay> 是一个不参与页面布局的承载容器。它本身不占据任何空间，也不需要设置宽度和高度。

<overlay>被渲染时，其内部的内容完全脱离 Lynx 文档流，被提升到 Lynx 之外的渲染层级进行展示。

<overlay>的唯一子节点默认以屏幕尺寸作为宽高基准，推荐将其视为一个独立的绘制容器，用于承载完整的蒙层内容。

#使用指南

#必要条件

• <overlay>只能有一个直接子节点

• <overlay>自身必须设置 position:fixed

#推荐用法

• 推荐将<overlay>的唯一子节点作为 backdrop 容器：
• 即使背景是透明的，也建议显示绘制
• 显示设置尺寸：width: 100%; height: 100%
• 显示创建独立的 stacking context：z-index:0

<overlay class="overlay">
  <view class="backdrop">
    // Dialog Content
    <Dialog class="dialog-content" />
  </view>
</overlay>

.overlay {
  overflow: visible;
  position: fixed;
}

.backdrop {
  width: 100%;
  height: 100%;
  z-index: 0;
}

• 如需调整弹窗的视觉尺寸，应在 backdrop 内部点上使用 margin 等方式控制，而不是修改 backdrop 本身的尺寸

.dialog-content {
  margin: 100px;
  position: absolute;
}

overlaysrc/base/index.tsx

Code

预览

#属性

#ios-enable-swipe-back

// @defaultValue: false
'ios-enable-swipe-back'?: boolean;

当 overlay 显示时，'true' 允许右滑关闭当前页面，'false' 不允许。

#level

// @defaultValue: 1
level?: 4 | 2 | 1 | 3;

引入层级概念，共分为四个层级。层级数字越大越靠近底部。默认为第 1 层。层级按 1 到 4 的顺序排列，显示的层级是指定的，不受显示顺序影响。同一层级内的排列遵循“后进先出”逻辑。overlay 显示期间不可动态调整层级，只能在隐藏时调整。*

#mode

// @defaultValue: 'window'
mode?: string;

指定 iOS 上 overlay 内容的挂载层级。window：挂载到窗口（应用顶层）；top：挂载到 topViewController；page：挂载到 UINavigationController；others：在客户端自定义类名。

#visible

// @defaultValue: false
visible?: boolean;

控制 overlay 是否显示

#事件

前端可绑定对应事件回调以监听元素运行时行为，如下所示。

#binddismissoverlay

binddismissoverlay = (e: BaseEvent) => {};

overlay 隐藏时回调。

#binderror

binderror = (e: OverlayErrorEvent) => {};

触摸 overlay 时回调。

#bindoverlaytouch

bindoverlaytouch = (e: OverlayTouchEvent) => {};

触摸 overlay 时回调。

#bindrequestclose

bindrequestclose = (e: BaseEvent) => {};

点击返回按钮时回调。

#bindshowoverlay

bindshowoverlay = (e: BaseEvent) => {};

overlay 显示时回调。

#兼容性