AngularLynx

    <overlay>

    A layer above the whole page, like a modal <dialog>. Use it for dialogs and sheets: while it shows, the rest of the app gets no taps.

    element-overlaysrc/app/app.ts

    Usage

    src/app/confirm.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-confirm',
  imports: [LYNX_ELEMENTS],
  template: `
    <overlay
      [attr.visible]="open()"
      style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;"
    >
      <view
        style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);"
        (bindtap)="open.set(false)"
      >
        <view
          style="padding: 24px; background-color: white;"
          (catchtap)="onPanelTap()"
        >
          <text>Are you sure?</text>
        </view>
      </view>
    </overlay>
  `,
})
export class Confirm {
  readonly open = signal(false);

  // catchtap stops the tap here, so tapping the panel doesn't reach the backdrop and close it.
  onPanelTap(): void {}
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    AttributeTypeDefaultDescription
    visiblebooleanfalseShows or hides the overlay.
    level1 | 2 | 3 | 41iOS and Android. The layer the overlay sits in, when several are open.
    mode'window' | 'top' | 'page''window'iOS only. What the overlay attaches to in the native app: the whole app window, the topmost screen, or the current navigation stack.
    ios-enable-swipe-backbooleanfalseiOS only. Lets the swipe-back gesture leave the page while the overlay shows.
    android-navigation-bar-style'auto' | 'light' | 'dark' | 'transparent''auto'Android only, Lynx 4.1 and later. Look of the system navigation bar while the overlay shows. transparent also needs android-adapt-edge-to-edge.
    android-overlay-scope'global' | 'fragment''global'Android only, Lynx 4.3 and later. 'fragment' ties the overlay to the part of the native screen that holds your Lynx view, so it hides along with it.

    Plus the common attributes, such as id, class and style.

    Events

    Read the payload from $event.detail (see Handling taps and events).

    EventdetailDescription
    bindshowoverlay—iOS and Android. The overlay was shown.
    binddismissoverlay—iOS and Android. The overlay was hidden.
    bindrequestclose—Android only. The user pressed the system back button. Set visible to false to close.
    bindoverlaytouch{ x: number; y: number; state: 0 | 1 | 2 | 3 }iOS and Android. A touch on the overlay. state is 0 down, 1 move, 2 up or 3 cancel; x and y are relative to the window.
    binderror{ errorCode: string; errorMsg: string }Android only. The overlay couldn't be shown.

    Plus the common events, such as bindtap.

    Children

    Give the overlay one child: a view that fills the screen (width: 100%; height: 100%), such as a dimmed backdrop. Put your content inside that view.

    The overlay takes no space itself. It sizes only its first child, against the screen, so a bare position: absolute first child collapses to the top-left corner.