• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Split view

Component status
Contribution
Current version@spectrum-css/splitview@4.2.4
ReleasedMarch 7, 2024
View repository
GitHub
View package
npm

Variants

Horizontal
Contribution

Left
Right
Show markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 304px">Left</div>
  <div class="spectrum-SplitView-splitter"></div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

Horizontally resizable
Contribution

Left
Right
Show markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 304px">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

Horizontal collapsed left
Contribution

Left
Right
Show markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 0">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-start">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

Horizontal collapsed right
Contribution

Left
Right
Show markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="flex: 1">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-end">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="width: 0">Right</div>
</div>

Vertically resizable
Contribution

Left
Right
Show markup
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="height: 50px">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

Vertical collapsed top
Contribution

Left
Right
Show markup
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="height: 0">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-start">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

Vertical collapsed bottom
Contribution

Left
Right
Show markup
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="flex: 1">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-end">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="height: 0">Right</div>
</div>