A lightweight, flexible docking framework for building split-view layouts with drag-and-drop panel management
npm install split-dockbash
npm install split-dock
`
Or use via CDN:
`html
`
Usage
Create an HTML structure with the following classes:
`html
Panel 1
Your content here
`
The framework auto-initializes on page load.
$3
- sd-frame: Container for docks or nested frames. Add horizontal or vertical for split direction.
- sd-dock: Panel container with tab navigation.
- sd-panel: Individual panel with title and content.
- sd-panel-title: Panel tab title.
- sd-panel-content: Panel content area.
$3
- Drag panels to dock edges to create splits
- Drag tabs to reorder within or between docks
- Resize panes with handles
- Empty docks auto-removed
Configuration
Modify constants in CONFIG object:
`javascript
import { CONFIG } from 'split-dock';
CONFIG.layout.minPaneSize = 150; // Minimum pane size (px)
CONFIG.layout.dropZoneRatio = 0.25; // Drop zone edge ratio
CONFIG.layout.dragGhostOffset = 15; // Drag ghost offset (px)
CONFIG.layout.defaultFlexBasis = '1 1 0px';
CONFIG.ui.closeButtonSymbol = '×';
CONFIG.ui.defaultPanelTitle = 'New Panel';
``