#<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

// @默认值: false
'ios-enable-swipe-back'?: boolean;

当覆盖层显示时，'true' 允许向右滑动关闭当前页面，'false' 则不允许。

#level

// @默认值: 1
level?: 4 | 2 | 1 | 3;

引入了层的概念，分为四个级别。层的值越大，越靠近底部。默认情况下为第一级。层按 1 到 4 的顺序排列。指定要显示的层，不受显示顺序的影响。在每个层内，按照“后进先出”的逻辑排列。覆盖层显示时无法动态调整层，只能在隐藏时进行调整。

#mode

// @默认值: 'window'
mode?: string;

指定覆盖层内容在 iOS 上的层级。window：挂载在窗口上，即应用的顶层；top：挂载在 topViewController 上；page：挂载在 UINavigationController 上；others：在客户端中自定义类名。

#visible

// @默认值: false
visible?: boolean;

控制覆盖层是否显示。

#事件

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

#binddismissoverlay

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

覆盖层隐藏时的回调。

#binderror

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

触摸覆盖层时的回调

#bindoverlaytouch

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

触摸覆盖层时的回调

#bindrequestclose

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

点击返回按钮时的回调。

#bindshowoverlay

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

覆盖层显示时的回调

#兼容性