Using Panels

@deck.gl-community/panels provides the composition model for building panel-based UI. It focuses on panel definitions, container composition, and rendering structure.

Core concepts

• A leaf panel defines one titled unit of content.
• A composite panel combines other panels into a larger structure.
• A panel container describes how panels are arranged and rendered.

Composite Panels

Panels built from other panels.

• AccordeonPanel
• TabbedPanel
• ColumnPanel
• SplitterPanel

Leaf Panels

Panels with no child panels.

• CustomPanel
• BinaryDataPanel
• MarkdownPanel
• StatsPanel
• SettingsPanel
• KeyboardShortcutsPanel
• TextEditorPanel

Composition patterns

• Use AccordeonPanel when you want a stack of collapsible sections.
• Use TabbedPanel when several panels share the same footprint and only one should be visible at a time.
• Use ColumnPanel when all child panels should remain visible in order.
• Use SplitterPanel when the first child panel should resize against the remaining child panels.
• Use MarkdownPanel for small descriptive content without mounting your own renderer.
• Use BinaryDataPanel for capped hex and ASCII previews of caller-supplied binary data.
• Use StatsPanel for compact probe.gl stats tables inside an existing panel layout.
• Use CustomPanel when content must be rendered imperatively into a DOM host.
• Use TextEditorPanel for Monaco-backed JSON or plaintext editing within a panel layout.