Skip to main content
WebGPUnot applicable

AccordionPanel

from v9.3

AccordionPanel wraps multiple child panels into one collapsible accordion panel.

Usage​

Use AccordionPanel when one panel should expand into several collapsible subsections.

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

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

new AccordionPanel({
  id: 'inspector', title: 'Inspector', panels: [summaryPanel, detailsPanel],
  defaultExpandedPanelIds: ['summary'], allowMultipleExpanded: false
});

Props​

type AccordionPanelProps = PanelProps & {
  panels: ReadonlyArray<Panel>;
  id?: string;
  title?: string;
  theme?: PanelTheme;
  defaultExpandedPanelIds?: ReadonlyArray<PanelId>;
  expandedPanelIds?: ReadonlyArray<PanelId>;
  onExpandedPanelIdsChange?: (ids: ReadonlyArray<PanelId>) => void;
  allowMultipleExpanded?: boolean;
};

See Also​

Remarks​

  • Renders the ordered child panel array as accordion sections.
  • Produces one composite panel that can be used directly or passed into the deck.gl wrapper module.

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.