Component

Splitter

Resizable two-pane layout with draggable divider, min/max constraints and vertical or horizontal mode

import { NeuSplitterComponent } from '@neural-ui/core/splitter';
import type { NeuSplitterPane } from '@neural-ui/core/splitter';

Vertical

Three panels with different sizes

<div style="height: 400px">
  <neu-splitter
    direction="horizontal"
    [panes]="[{ size: 30, min: 15 }, { size: 70, min: 30 }]"
    (sizeChange)="sizes = $event"
  >
    <div>
      <nav class="sidebar"><!-- side navigation --></nav>
    </div>

    <div>
      <main class="content"><!-- main content --></main>
    </div>
  </neu-splitter>
</div>

Horizontal (default)