LayoutSplitter

A flexible, resizable split-pane layout component for building horizontal or vertical split views with draggable handles. Supports multiple panels, min/max constraints, nested layouts, manual handle placement, and advanced use cases. Includes helper subcomponents and layouts.

---

Import

import { LayoutSplitter } from '@odyssee/components';
// Helpers (optional)
import { HorizontalSplitter, VerticalSplitter, CodeEditorLayout, ThreePanelLayout } from '@odyssee/components';

---

Basic Usage (Horizontal Splitter)

Code Éditable

Résultat

---

Vertical Splitter

Code Éditable

Résultat

---

Three Panels (Vertical)

Code Éditable

Résultat

---

Nested Splitters

Code Éditable

Résultat

---

Manual Handle Placement

Code Éditable

Résultat

---

With Min/Max Constraints

Code Éditable

Résultat

---

Props

LayoutSplitter Props

Name	Type	Default	Description
children	Pulse.JSX.Element | Pulse.JSX.Element[]	—	Panels (SplitterPanel components)
direction	'horizontal' | 'vertical'	'horizontal'	Split direction
handleTemplate	Pulse.JSX.Element | string	—	Custom handle template
handleClasses	string	—	Custom handle CSS classes
manualHandles	boolean	false	If true, handles must be placed manually
onResize	(sizes: number[]) => void	—	Callback when panel sizes change
disabled	boolean	false	Disable resizing
className	string	—	Additional CSS classes
id	string	auto	DOM id (auto-generated if not provided)
style	string	—	Inline styles
...rest	any	—	Other props are spread to the root <div>

LayoutSplitter.Panel Props

Name	Type	Default	Description
children	Pulse.JSX.Element | ...	—	Content to render inside the panel
size	number | Signal<number>	—	Initial size (percentage 0-100)
minSize	number	—	Minimum size (percentage)
maxSize	number	—	Maximum size (percentage)
limitReachedClass	string	—	Class when min/max limit is reached
className	string	—	Additional CSS classes
id	string	—	DOM id
style	string	—	Inline styles
...rest	any	—	Other props are spread to the root <div>

LayoutSplitter.Handle Props

Name	Type	Default	Description
direction	'horizontal' | 'vertical'	inherited	Handle direction
children	Pulse.JSX.Element | string	—	Custom handle content
className	string	—	Additional CSS classes
id	string	—	DOM id
...rest	any	—	Other props are spread to the root <div>

---

Helper Components

• HorizontalSplitter: Shortcut for <LayoutSplitter direction='horizontal' />
• VerticalSplitter: Shortcut for <LayoutSplitter direction='vertical' />
• CodeEditorLayout: Prebuilt layout for sidebar + editor + preview (horizontal)
• ThreePanelLayout: Prebuilt vertical layout with top, middle, and bottom panels

---

Accessibility

• Panels are rendered as semantic <div> containers.
• Handles are visually distinct and keyboard focusable if made interactive.
• Ensure sufficient color contrast for handles and panel content.
• Resizing is managed by Preline JS; ensure keyboard accessibility if required.

---

Best Practices

• Use direction to control split orientation.
• Use minSize/maxSize to prevent panels from becoming too small or too large.
• Use manualHandles for advanced layouts or custom handle placement.
• Nest splitters for complex layouts (e.g., IDEs, dashboards).
• Always provide clear content in each panel for accessibility.

---

Subcomponents & Helpers

• LayoutSplitter.Panel: Defines a resizable panel.
• LayoutSplitter.Handle: Custom or manual handle between panels.
• HorizontalSplitter / VerticalSplitter: Quick splitters.
• CodeEditorLayout: Sidebar + editor + preview.
• ThreePanelLayout: Top, middle, bottom panels.

---