• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

SplitView

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/splitview@3.0.0-beta.4

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>