Initial commit
This commit is contained in:
Zhongwei Li
71
docs/menu-tool-layouts/dock-layout.md
Normal file
71
docs/menu-tool-layouts/dock-layout.md
Normal file
@@ -0,0 +1,71 @@
|
||||
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>
|
||||
```
|
||||
66
docs/menu-tool-layouts/liquid-float-layout.md
Normal file
66
docs/menu-tool-layouts/liquid-float-layout.md
Normal file
@@ -0,0 +1,66 @@
|
||||
1. Home
|
||||
2. Menu Tool Layouts
|
||||
3. Liquid Float Layout
|
||||
|
||||
# Liquid Float Layout
|
||||
|
||||
A flexible floating layout system that allows elements to flow and position themselves dynamically based on content and available space.
|
||||
|
||||
## Overview
|
||||
|
||||
The Liquid Float Layout provides a fluid positioning system where elements can float and reposition themselves naturally, similar to how liquid adapts to its container. This layout is particularly useful for tool panels, menus, and dynamic content that needs to adapt to varying screen sizes and content lengths.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Main Content
|
||||
|
||||
[0] 0 1 ✕ FPS mujoco Maxlen [0] 0 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
|
||||
|
||||
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 ```tsx
|
||||
<LiquidLayoutView
|
||||
left={<SceneGraph cardClassName="h-full"/>}
|
||||
right={<ControlTabs/>}
|
||||
top={<TopToolbar/>}
|
||||
bottom={<PlaybackControl/>}
|
||||
>
|
||||
<MainPlaceholder/>
|
||||
</LiquidLayoutView>
|
||||
```
|
||||
197
docs/menu-tool-layouts/toolbar.md
Normal file
197
docs/menu-tool-layouts/toolbar.md
Normal file
@@ -0,0 +1,197 @@
|
||||
1. Home
|
||||
2. Menu Tool Layouts
|
||||
3. Toolbar
|
||||
|
||||
# Toolbar
|
||||
|
||||
Simple, composable toolbar components for organizing buttons and actions.
|
||||
|
||||
## Complex Example
|
||||
|
||||
Add ```jsx
|
||||
const [selectedTool, setSelectedTool] = useState("select");
|
||||
|
||||
return (
|
||||
<Toolbar size="md">
|
||||
<ToolbarGroup>
|
||||
<ToggleButtons value={selectedTool} onValueChange={setSelectedTool} padding={false} variant="primary">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<ToggleButton icon value="select" >
|
||||
<MouseCursorAltIcon strokWidth={0.5} size="md"/>
|
||||
</ToggleButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Select tool</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<ToggleButton value="edit" icon >
|
||||
<MouseCursorIcon strokWidth={0.5}/>
|
||||
</ToggleButton>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Edit tool</TooltipContent>
|
||||
</Tooltip>
|
||||
</ToggleButtons>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button icon variant="ghost">
|
||||
<Scissors className="size-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Cut</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button icon variant="ghost">
|
||||
<Hand className="size-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Hand tool</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
icon
|
||||
size="md"
|
||||
>
|
||||
<Hash/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Hash tool</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
icon
|
||||
size="md"
|
||||
onClick={() => toast("Type tool selected")}
|
||||
>
|
||||
<Type/>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Type tool</TooltipContent>
|
||||
</Tooltip>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator />
|
||||
<ToolbarGroup>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={() => toast("Add item clicked")}
|
||||
>
|
||||
<Plus/> Add
|
||||
</Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
)
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Add ```jsx
|
||||
<Toolbar>
|
||||
<ToolbarGroup>
|
||||
<Button variant="ghost" icon>
|
||||
<Hash/>
|
||||
</Button>
|
||||
<Button variant="ghost" icon>
|
||||
<Type/>
|
||||
</Button>
|
||||
<Button variant="ghost" icon>
|
||||
<Image/>
|
||||
</Button>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator />
|
||||
<ToolbarGroup>
|
||||
<Button variant="primary">
|
||||
<Plus/> Add
|
||||
</Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
- Toolbar - Main container with variant support (default | floating)
|
||||
- ToolbarGroup - Groups related buttons with gap spacing
|
||||
- Button - Button component with toolbar-specific styling
|
||||
- ToolbarSeparator - Short rounded visual separator
|
||||
|
||||
## Floating Variant
|
||||
|
||||
Add ```jsx
|
||||
<Toolbar variant="floating">
|
||||
<ToolbarGroup>
|
||||
<Button variant="ghost" icon>
|
||||
<Hash />
|
||||
</Button>
|
||||
<Button variant="ghost" icon>
|
||||
<Type />
|
||||
</Button>
|
||||
</ToolbarGroup>
|
||||
<ToolbarSeparator />
|
||||
<ToolbarGroup>
|
||||
<Button variant="primary">
|
||||
<Plus /> Add
|
||||
</Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
```
|
||||
|
||||
## Sizes
|
||||
|
||||
```jsx
|
||||
{/* Small toolbar - compact padding */}
|
||||
<Toolbar size="sm">
|
||||
<ToolbarGroup>
|
||||
<Button variant="ghost" icon size="sm"><Hash /></Button>
|
||||
<Button variant="ghost" icon size="sm"><Type /></Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
|
||||
{/* Medium toolbar - default */}
|
||||
<Toolbar size="md">
|
||||
<ToolbarGroup>
|
||||
<Button variant="ghost" icon size="md"><Hash /></Button>
|
||||
<Button variant="ghost" icon size="md"><Type /></Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
|
||||
{/* Large toolbar - spacious padding */}
|
||||
<Toolbar size="lg">
|
||||
<ToolbarGroup>
|
||||
<Button variant="ghost" icon size="lg"><Hash /></Button>
|
||||
<Button variant="ghost" icon size="lg"><Type /></Button>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Toolbar
|
||||
|
||||
```tsx
|
||||
interface ToolbarProps {
|
||||
className?: string
|
||||
children?: React.ReactNode
|
||||
variant?: "default" | "floating"
|
||||
size?: "sm" | "md" | "lg"
|
||||
}
|
||||
```
|
||||
|
||||
### Button
|
||||
|
||||
```tsx
|
||||
interface ButtonProps {
|
||||
variant?: "primary" | "secondary" | "destructive" | "ghost" | "link"
|
||||
size?: "sm" | "md" | "lg"
|
||||
icon?: boolean
|
||||
className?: string
|
||||
children: React.ReactNode
|
||||
onClick?: () => void
|
||||
disabled?: boolean
|
||||
tooltip?: string
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user