Skip to main content

Splitter

Draggable divider and resizable dual panes with mouse/touch drag, keyboard stepping, and min/max dimension bounds.

Horizontal Splitter

Sidebar Pane

Drag the middle bar or use Left/Right arrow keys when focused.

Main Editor Area

This pane flexes and resizes fluidly with the splitter handle.

<div class="splitter-container split-view" data-boodoo="splitter" style="height: 350px;" data-min-size="150">
  <div class="splitter-pane p-3" style="width: 250px;">
    <h6><span>Left Panel</span></h6>
  </div>
  <div class="splitter-gutter" data-boodoo-splitter-gutter></div>
  <div class="splitter-pane p-3 flex-grow-1">
    <h6><span>Content Panel</span></h6>
  </div>
</div>

Vertical Orientation

Top Console

Outputs and logs pane.

Bottom Terminal

Interactive shell session.

<div class="splitter-container split-view splitter-vertical" data-boodoo="splitter" data-orientation="vertical" style="height: 300px;">
  <div class="splitter-pane" style="height: 120px;">...</div>
  <div class="splitter-gutter" data-boodoo-splitter-gutter></div>
  <div class="splitter-pane flex-grow-1">...</div>
</div>