Splitter

Split views with adjustable width/height.

Horizontal

Two panels split horizontally.

Left Panel (30%)
Right Panel (Fill)
<prism-splitter style="height: 300px; border: 1px solid var(--surface-200);">
  <prism-splitter-panel size="30%">
    <div class="p-4">Left Panel (30%)</div>
  </prism-splitter-panel>
  <prism-splitter-panel>
    <div class="p-4">Right Panel (Fill)</div>
  </prism-splitter-panel>
</prism-splitter>

Vertical

Two panels split vertically.

Top Panel (100px)
Bottom Panel (Fill)
<prism-splitter orientation="vertical" style="height: 400px; border: 1px solid var(--surface-200);">
  <prism-splitter-panel size="100px">
    <div class="p-4">Top Panel (100px)</div>
  </prism-splitter-panel>
  <prism-splitter-panel>
    <div class="p-4">Bottom Panel (Fill)</div>
  </prism-splitter-panel>
</prism-splitter>

Complex / Nested

Nested splitters for complex layouts.

Sidebar (200px)
Main Content - Top
Main Content - Bottom
<prism-splitter style="height: 400px; border: 1px solid var(--surface-200);">
  <prism-splitter-panel size="200px">
    <div class="p-4">Sidebar</div>
  </prism-splitter-panel>
  <prism-splitter-panel>
    <prism-splitter orientation="vertical">
      <prism-splitter-panel size="50%">
        <div class="p-4">Main - Top</div>
      </prism-splitter-panel>
      <prism-splitter-panel>
        <div class="p-4">Main - Bottom</div>
      </prism-splitter-panel>
    </prism-splitter>
  </prism-splitter-panel>
</prism-splitter>

Constraints

Resizable panels with min and max size limits.

Resizable (100px - 300px)
Flexible
<prism-splitter style="height: 200px; border: 1px solid var(--surface-200);">
  <prism-splitter-panel size="150px" [min]="100" [max]="300">
    <div class="p-4">Resizable (100px - 300px)</div>
  </prism-splitter-panel>
  <prism-splitter-panel>
    <div class="p-4">Flexible</div>
  </prism-splitter-panel>
</prism-splitter>

Handle Labels

Add labels or custom templates to splitter handles.

Panel A
Settings
Panel B
Editor Area
Console
Output Log
<prism-splitter style="height: 300px; border: 1px solid var(--surface-200);">
  <prism-splitter-panel size="40%" handleLabel="Settings">
    <div class="p-4">Panel with Labelled Handle</div>
  </prism-splitter-panel>
  <prism-splitter-panel>
    <div class="p-4">Main Content</div>
  </prism-splitter-panel>
</prism-splitter>

prism-splitterNameTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Layout direction of the panels.
prism-splitter-panelNameTypeDefaultDescription
sizenumber | string-Initial size of the panel (px or %).
minnumber | string0Minimum size constraint.
maxnumber | string100%Maximum size constraint.
resizablebooleantrueWhether the panel can be resized.
collapsiblebooleanfalseWhether the panel can be collapsed.
handleLabelstring-Text label to display on the handle.
handleTemplateTemplateRef<void>-Custom template for the handle content.

Name	Type	Default	Description
`size`	`number \| string`	`-`	Initial size of the panel (px or %).
`min`	`number \| string`	`0`	Minimum size constraint.
`max`	`number \| string`	`100%`	Maximum size constraint.
`resizable`	`boolean`	`true`	Whether the panel can be resized.
`collapsible`	`boolean`	`false`	Whether the panel can be collapsed.
`handleLabel`	`string`	`-`	Text label to display on the handle.
`handleTemplate`	`TemplateRef<void>`	`-`	Custom template for the handle content.