1.6 KiB
- Home
- Menu Tool Layouts
- Dock Layout
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
Add 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
Scene Camera Render Connection
Background Color
Color
World Transform
Position
X Y Z Rotation
X Y Z Scale
V HemisphereLight-[light-default-hemi]
skyColor
groundColor
Intensity
V Show Helper
Hide
DirectionalLight-[light-default-direct]
Color
Intensity
V Show Helper
Hide
Gizmo
Enable
[0] 0 1 ✕ FPS mujoco Maxlen [0] 0 ```tsx <DockLayoutView left={} right={} bottom={} top={}
```