#<overlay>

<overlay> is a container that does not participate in page layout. It occupies no space itself and requires neither width nor height.

When rendered, the content inside <overlay> is completely detached from the Lynx document flow and promoted to a rendering layer outside of Lynx.

By default, the only child of <overlay> uses the screen dimensions as its width and height. It is recommended to treat it as an independent drawing container for the full overlay content.

#Usage

#Requirements

• <overlay> can only have one direct child node.
• <overlay> itself must set position: fixed.

#Recommended Usage

• Use the only child node of <overlay> as the backdrop container:
  • Even if the background is transparent, it is still recommended to render it.
  • Explicitly set the size: width: 100%; height: 100%.
  • Explicitly create an independent 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;
}

• To adjust the dialog’s visual size, control it inside the backdrop (e.g. with margin) instead of changing the backdrop’s own size.

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

overlaysrc/base/index.tsx

Preview

#Attributes

#ios-enable-swipe-back

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

When overlay is displayed, 'true' allows swiping right to close the current page, 'false' does not allow it

#level

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

Introduces the concept of layers, which are divided into four levels. The larger the layer, the closer it is to the bottom. By default, it is the first level. The layers are arranged in order from 1 to 4. The displayed layer is specified and is not affected by the order of display. Within each layer, the arrangement is based on the 'last in, first out' logic. The layer cannot be dynamically adjusted when the overlay is displayed, and can only be adjusted when it is hidden. *

#mode

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

Specifies the level at which the overlay content resides on iOS. window: Mounted on the window, the top level of the app; top: Mounted on the topViewController; page: Mounted on UINavigationController; others: customize the name of class in the client.

#visible

// @defaultValue: false
visible?: boolean;

Control whether the overlay is displayed

#Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

#binddismissoverlay

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

Callback when the overlay is hidden.

#binderror

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

Callback when touch on the overlay

#bindoverlaytouch

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

Callback when touch on the overlay

#bindrequestclose

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

Callback when the back button is clicked.

#bindshowoverlay

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

Callback when the overlay is displayed

#Compatibility