Skip to main content

Popup

Shows floating content above other views.

Example​

Controls Popup

@view('ControlsPopup')
export class ControlsPopupView extends BaseExampleScreenView<ControlsPopupState> {
  @state isOpen: boolean = true;

  protected getViews(): ViewStruct<ViewState>[] {
    // --- edit below ---

    return [
      VGroup([
        Button({ text: this.isOpen ? 'Hide Popup' : 'Show Popup', width: 300 })
          .isInitialFocus(true)
          .onClick(() => { this.isOpen = !this.isOpen; }),
        Popup([
          VGroup([
            Label({ text: 'Popup Content' }),
            Label({ text: 'This floats over content.' })
          ]).itemSpacing(8).translation([20, 20])
        ]).visible(this.isOpen)
          .width(400)
          .height(160)
      ]).itemSpacing(12)
    ];

    // --- edit above ---
  }
}
Tip: Toggle Visibility

Use a @state boolean to control .visible() on Popup and flip it in a button .onClick.

API Reference​

Popup API