Skip to main content

ModalPanelWidget

from v9.3

ModalPanelWidget renders a deck.gl widget trigger that opens a centered overlay panel.

Usage​

import {MarkdownPanel, TabbedPanel} from '@deck.gl-community/panels';
import {ModalPanelWidget} from '@deck.gl-community/widgets';

const helpPanel = new TabbedPanel({
  id: 'help',
  title: 'Help',
  panels: {
    overview: new MarkdownPanel({
      id: 'overview',
      title: 'Overview',
      markdown: 'Secondary content that opens on demand.'
    })
  }
});

const widget = new ModalPanelWidget({
  id: 'help-widget',
  panel: helpPanel,
  triggerLabel: 'Help'
});

Use ModalPanelWidget for secondary controls or reference material that should be available on demand without permanently occupying canvas space.

Import panel definitions from @deck.gl-community/panels and pass them to ModalPanelWidget through panel or container.

Props​

type ModalPanelWidgetProps = WidgetProps & {
  icon?: string;
  container?: WidgetContainer;
  panel?: WidgetPanel;
  placement?: WidgetPlacement;
  title?: string;
  triggerLabel?: string;
  triggerIcon?: string;
  hideTrigger?: boolean;
  button?: boolean;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
};

Remarks​

  • Accepts either a full panel container description or a single panel.
  • Can render with the built-in icon trigger or be controlled externally.
  • Supports controlled and uncontrolled open state.
  • Closes on backdrop click and Escape.
  • Raises its placement container while open so the dialog stays above neighboring widgets.