AngularLynx

    <cover-view>

    Draws its children above embedded native views, such as a <webview>, which otherwise cover all Lynx content. It works only in Lynx's desktop apps for Windows and macOS, which use Lynx's Clay renderer: desktop (Clay) only.

    Usage

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

@Component({
  selector: 'app-browser',
  imports: [LYNX_ELEMENTS],
  template: `
    <view style="width: 100%; height: 100%;">
      <webview
        src="https://lynxjs.org"
        style="width: 100%; height: 100%;"
      ></webview>
      <cover-view
        style="position: absolute; top: 16px; right: 16px; width: 240px; height: 48px;"
      >
        <view
          style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.72);"
        >
          <text style="color: white;">Controls above the web view</text>
        </view>
      </cover-view>
    </view>
  `,
})
export class Browser {}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    iOS and Android have no <cover-view>. Like any element the host app doesn't register, iOS leaves an empty box in its place and Android can drop the elements after it. Don't render it on iOS or Android.

    Attributes

    None of its own. Position and size it like a <view>. It takes the common attributes, such as id, class and style.

    Events

    None, apart from the common events, such as bindtap.

    Platform support

    PlatformSupport
    Windows (Clay)Yes. It covers native views inside the app window, but not separate pop-up windows.
    macOS (Clay)Yes. It covers native controls inside the Lynx view, but not other windows or views outside it.
    iOS and AndroidNo. See the warning above.
    WebNo.