Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

<overlay>

<overlay> is an element designed specifically for Hybrid Apps; its children can break out of the LynxView document flow and be fixed to the native page.

  • In a hybrid app where LynxView is used as a feed card, you can use <overlay> to build dialogs/modals.
  • When using LynxView to build an entire page, <overlay> is not recommended; using position: fixed directly is simpler.

Usage

INFO
  • <overlay> can only have one direct child, and <overlay> itself must set a required CSS property:
    • <overlay style="position: fixed;/>
  • <overlay> is just a container and occupies no space, so it does not need any width or height and does not affect the parent container's layout.
  • <overlay> automatically places its inner children at appropriate layers; you do not need to set z-index, translateZ, etc.
  • The single child node of <overlay> uses the screen size as its width/height baseline by default; we recommend using it as a dedicated container for all rendering content.
    • Use this child as a backdrop to draw the overlay (even if it might be transparent) and set width:100%; height:100%;
    • To adjust the visual size of the dialog, set margin and other parameters inside this child node.
  • Layout rules for all inner children of <overlay>:
    • You can use position: absolute but must not use position: fixed inside.
    • When using z-index, ensure the stacking context is <overlay> itself; otherwise, elements will attach to <page>.
<overlay class="overlay">
  <view class="backdrop">
    // Dialog Content
    <BizContent class="biz-content" />
  </view>
</overlay>
.overlay {
  overflow: visible;
  position: fixed;
  z-index: 0;
}
.backdrop {
  width: 100%;
  height: 100%;
  background: gray;
}
.biz-content {
  margin: 100px;
  position: absolute;
}

Use <overlay> to create a dialog

overlaysrc/base/index.tsx
Preview

Attributes

ios-enable-swipe-back

iOS only 
// @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

Android only
iOS only
Clay only
Harmony only 
// @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

iOS only 
// @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

Android only
iOS only
Clay only
Harmony only 
// @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

Android only
iOS only
Clay only
Harmony only 
binddismissoverlay = (e: BaseEvent) => {};

Callback when the overlay is hidden.

binderror

Android only
2.18 
binderror = (e: OverlayErrorEvent) => {};
FieldTypeOptionalDefaultPlatformsSinceDescription
errorCodestringNo–
Android only		Error code: 0 - Display normally; non-0 - Unable to display, you can try to solve it by using the preloading scheme mentioned below for adapting containers.
errorMsgstringNo–
Android only		Error message

Callback when touch on the overlay

bindoverlaytouch

Android only
iOS only
Clay only 
bindoverlaytouch = (e: OverlayTouchEvent) => {};
FieldTypeOptionalDefaultPlatformsSinceDescription
stateOverlayTouchStateNo–
Android only
iOS only
Clay only		Touch state
xnumberNo–
Android only
iOS only
Clay only		x position relative to the window, in px
ynumberNo–
Android only
iOS only
Clay only		y position relative to the window, in px

Callback when touch on the overlay

bindrequestclose

Android only
Clay only
Harmony only 
bindrequestclose = (e: BaseEvent) => {};

Callback when the back button is clicked.

bindshowoverlay

Android only
iOS only
Clay only
Harmony only 
bindshowoverlay = (e: BaseEvent) => {};

Callback when the overlay is displayed

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.