Skip to main content
WebGPUnot applicable

TabbedPanel

from v9.3

TabbedPanel wraps multiple child panels into one tabbed parent panel.

Usage​

Use TabbedPanel when several panels share the same footprint and only one should be visible at a time.

import {TabbedPanel, type TabbedPanelProps} from '@deck.gl-community/panels';

The example assumes two content panels, summaryPanel and detailsPanel, with those IDs.

new TabbedPanel({
  id: 'inspector', title: 'Inspector', panels: [summaryPanel, detailsPanel],
  defaultActivePanelId: 'summary', tabListLayout: 'scroll'
});

Props​

type TabbedPanelProps = PanelProps & {
  panels: ReadonlyArray<Panel>;
  id?: string;
  title?: string;
  tabListLayout?: 'wrap' | 'scroll';
  theme?: PanelTheme;
  defaultActivePanelId?: PanelId;
  activePanelId?: PanelId;
  onActivePanelIdChange?: (id: PanelId | undefined) => void;
};

See Also​

Remarks​

  • Produces one composite panel whose body is a tabbed switcher of child panels.
  • Supports wrapped or horizontally scrolling tab lists.

Child arrays define display order. Give each child a distinct, stable ID. See state and updates for controlled values, local defaults, and refreshing definitions. PanelTheme is described in Panel Themes.

All tab bodies remain mounted; inactive bodies are hidden. This preserves their local state, but their mount effects still run (including editor loading). Use an unmounted collapsible section when expensive content must wait until first opened.