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

Split view

Component status
Contribution
Current version@spectrum-css/splitview@5.2.2
ReleasedAugust 29, 2024
S2-foundations@spectrum-css/splitview@6.0.0-s2-foundations.12
ReleasedAugust 2, 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>