Dock Layout

A traditional docking layout system that provides fixed-positioned panels and floating controls, similar to IDE and professional software interfaces.

Overview

The Dock Layout provides a desktop application-like interface layout system where left, right, and bottom panels are fixed and docked to the viewport edges, while the top area remains floating. This layout is particularly useful for applications that need fixed tool panels, status bars, and floating controls.

Usage Recommendations

  • Theme Compatibility: The dock-layout component is recommended for use with non-liquid themes only. It may not work optimally with liquid-based layouts.
  • Component Styling: When passing components to the left, right, or bottom props, it's recommended to remove shadow styles from these components for better visual integration (e.g., use className="shadow-none").

Basic Usage

Group 1
Group 3
Object 1
Object 2
Object 7
Group 2
Group 4
Object 3
Object 4
Group 5
Object 5
Object 6

Main Content

Render content
FPS
Maxlen
<DockLayoutView
  left={<SceneGraph cardClassName="shadow-none"/>}
  right={<ControlTabs cardClassName="shadow-none"/>}
  bottom={<PlaybackControl className="shadow-none" />}
  top={<TopToolbar/>}
>
  <MainPlaceholder/>
</DockLayoutView>