SplitView

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/splitview@2.0.0

Variants#


Horizontal#
Contribution

Left
Right
<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>
Show markup

Horizontally resizable#
Contribution

Left
Right
<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>
Show markup

Horizontal collapsed left#
Contribution

Left
Right
<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>
Show markup

Horizontal collapsed right#
Contribution

Left
Right
<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>
Show markup

Vertically resizable#
Contribution

Left
Right
<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>
Show markup

Vertical collapsed top#
Contribution

Left
Right
<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>
Show markup

Vertical collapsed bottom#
Contribution

Left
Right
<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>
Show markup