AngularLynx

    <title-bar-view>

    Makes part of a custom title bar the handle that drags the window, like the CSS app-region: drag property. It works only in Lynx's desktop apps for Windows and macOS, which use Lynx's Clay renderer: desktop (Clay) only.

    element-title-bar-viewsrc/app/app.ts

    Usage

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

@Component({
  selector: 'app-title-bar',
  imports: [LYNX_ELEMENTS],
  template: `
    <view style="height: 44px; flex-direction: row; align-items: center;">
      <title-bar-view [moveable]="true" style="flex: 1; height: 100%;">
        <text>My App</text>
      </title-bar-view>
      <view style="width: 44px; height: 100%;" (bindtap)="close()">
        <text>✕</text>
      </view>
    </view>
  `,
})
export class TitleBar {
  close(): void {}
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Dragging the title moves the window, and the close button next to it stays tappable.

    Warning

    iOS and Android have no <title-bar-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

    AttributeTypeDefaultDescription
    moveablebooleanfalseWhen true, dragging this element moves the window.

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

    Events

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

    Platform support

    PlatformSupport
    Windows and macOS desktop apps (Clay)Yes, Lynx 3.8 and later.
    iOS and AndroidNo. See the warning above.
    WebNo.