« E2 - Split Panel Demo

Interactive demonstration of resizable split panel components

Basic Horizontal Split Panel

Drag the vertical divider to resize panels

Panel 1

30% width
Min: 10%, Max: 70%

Panel 2

70% width
Min: 20%, Max: 80%

Vertical Split Panel

Drag the horizontal divider to resize panels

Top Panel

40% height

Bottom Panel

60% height

Three Panel Layout

Multiple panels with individual constraints

Sidebar

25% width
Min: 15%, Max: 40%

Main Content

50% width
Min: 30%

Inspector

25% width
Min: 15%, Max: 35%

Interactive Controls

Click "Get Sizes" to see current panel sizes

Dark Theme Example

Split panels with dark theme applied individually

Dark Panel 1

Themed for dark mode

Dark Panel 2

Custom CSS variables

Copy-Paste Examples

Ready-to-use code snippets for your projects:

Basic Horizontal Split Panel:

<!-- Load E2 Library -->
<script src="path/to/e2.min.js"></script>

<!-- Basic Horizontal Split Panel -->
<e2-split-panel-container orientation="horizontal">
  <e2-split-panel size="30">
    <div>Left panel content</div>
  </e2-split-panel>
  <e2-split-panel size="70">
    <div>Right panel content</div>
  </e2-split-panel>
</e2-split-panel-container>

Vertical Split Panel with Constraints:

<e2-split-panel-container orientation="vertical">
  <e2-split-panel size="40" min-size="20" max-size="60">
    <div>Top panel content</div>
  </e2-split-panel>
  <e2-split-panel size="60" min-size="30">
    <div>Bottom panel content</div>
  </e2-split-panel>
</e2-split-panel-container>

Three Panel Layout:

<e2-split-panel-container orientation="horizontal">
  <e2-split-panel size="25" min-size="15" max-size="40">
    <div>Sidebar content</div>
  </e2-split-panel>
  <e2-split-panel size="50" min-size="30">
    <div>Main content area</div>
  </e2-split-panel>
  <e2-split-panel size="25" min-size="15" max-size="35">
    <div>Inspector panel</div>
  </e2-split-panel>
</e2-split-panel-container>

JavaScript Event Handling:

// Listen for split panel resize events
document.addEventListener('split-panel-resize-start', event => {
  const { panelId, startSize } = event.detail;
  console.log(`Resize started on panel: ${panelId}, initial size: ${startSize}%`);
});

document.addEventListener('split-panel-resize', event => {
  const { panelId, size } = event.detail;
  console.log(`Panel ${panelId} resized to: ${size}%`);
});

document.addEventListener('split-panel-resize-end', event => {
  const { panelId, finalSize } = event.detail;
  console.log(`Resize completed on panel: ${panelId}, final size: ${finalSize}%`);
});

// Programmatic control
const container = document.querySelector('e2-split-panel-container');
container.resetPanelSizes(); // Reset to initial sizes
container.getPanelSizes(); // Get current sizes object
container.disabled = true; // Disable resizing

Output

Resize panels to see events: