71 lines
1.6 KiB
Markdown
71 lines
1.6 KiB
Markdown
1. Home
|
|
2. Menu Tool Layouts
|
|
3. 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={<SceneGraph cardClassName="shadow-none"/>}
|
|
right={<ControlTabs cardClassName="shadow-none"/>}
|
|
bottom={<PlaybackControl className="shadow-none" />}
|
|
top={<TopToolbar/>}
|
|
>
|
|
<MainPlaceholder/>
|
|
</DockLayoutView>
|
|
``` |