Split Panel

Wichtige Punkte zu Split Panels:

• Sie bestehen typischerweise aus zwei Panels, die durch einen verschiebbaren Trenner getrennt sind.

• Der Trenner kann horizontal oder vertikal ausgerichtet sein und teilt den verfügbaren Raum entsprechend.

• Benutzer können die Größe der beiden Panels anpassen, indem sie den Trenner ziehen.

• Manche Split Panels erlauben es, den Trenner zu fixieren, um eine Größenänderung zu verhindern.

• Sie eignen sich hervorragend für komplexe, anpassbare Mehrfachansichten, die auf verschiedene Bildschirmgrößen reagieren können.

1. Strukturelle HTML-Grundlage

Das Besondere an HTML-Code für Split Panels ist, dass HTML allein die Struktur vorgibt, aber die eigentliche Interaktivität (das Ziehen des Dividers) nur durch Kombination mit CSS und insbesondere JavaScript erreicht wird.

HTML definiert nur die Basisstruktur:

• Ein Container-Element für das Split Panel

• Zwei (oder mehr) untergeordnete Panels

• Ein Divider-Element dazwischen

Beispiel:

<div class="split-container">
  <div class="panel left"></div>
  <div class="divider"></div>
  <div class="panel right"></div>
</div>

2. Keine native HTML-Unterstützung

Es gibt kein natives <split>-Element in HTML – alles muss manuell mit <div> oder ähnlichen Elementen aufgebaut und via CSS+JS dynamisch gestaltet werden. Das unterscheidet Split Panels z. B. von <details>-Elementen, die bereits Interaktivität mit sich bringen.

3. Layout mit CSS

Damit das Panel „splittet“, müssen in CSS spezielle Layout-Techniken verwendet werden:

• display: flex (meistens)

• flex-direction: row oder column

• flex-grow oder feste Breiten/Höhen zur Steuerung der Panelgrößen

Beispiel:

.split-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}
.panel {
  flex: 1;
}
.divider {
  width: 5px;
  cursor: col-resize;
  background-color: #ccc;
}

4. JavaScript für Interaktivität

Der wichtigste technische Aspekt: Die Drag-Funktion des Dividers funktioniert nur mit JavaScript.

Typisch:

• Maus-Events (mousedown, mousemove, mouseup)

• Berechnung der neuen Breite/Höhe der Panels in Echtzeit

• Optional Speicherung der Position (z. B. in localStorage)

JavaScript-Beispiel (verkürzt):

divider.addEventListener('mousedown', function(e) {
  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', stopResize);
});

5. Arten von Split Panels

Classic Split Panel

Dies ist die grundlegendste Form eines Split Panels. Zwei Inhalte (Panels) sind nebeneinander (vertikal) aufgeteilt, und ein Divider befindet sich exakt in der Mitte. Der Benutzer kann den Divider ziehen, um die Größe der Paneele zu verändern.

Typische Merkmale:

• Gleichmäßige 50/50-Aufteilung der Inhalte beim der erstmaligen Ansicht der Webseite

• Dragbar liegt genau zwischen den Paneelen

Vorteile:

• Visuelle Balance

• Gute Startaufteilung für Inhalte mit gleicher Priorität

<div id="split-container-1" style="display: flex; height: 200px; width: 100%;">
  <div id="left-panel-1" style="background-color: violet; width: 50%;"></div>
  <div id="divider-1" style="width: 5px; cursor: ew-resize; background: gray;"></div>
  <div id="right-panel-1" style="background-color: slateblue; flex-grow: 1;"></div>
</div>

<script>
  const divider1 = document.getElementById("divider-1");
  const left1 = document.getElementById("left-panel-1");
  const container1 = document.getElementById("split-container-1");

  divider1.addEventListener("mousedown", function (e) {
    document.onmousemove = function (e) {
      const containerX = container1.getBoundingClientRect().left;
      const containerWidth = container1.offsetWidth;
      let newLeftWidth = e.clientX - containerX;
      if (newLeftWidth < 0) newLeftWidth = 0;
      if (newLeftWidth > containerWidth - 10) newLeftWidth = containerWidth - 10;
      left1.style.width = newLeftWidth + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  });
</script>

Initial Position

Hier befindet sich der Divider initial nicht in der Mitte, sondern z. B. bei 75% der Breite oder Höhe. Das bedeutet, dass ein Bereich (Panel) deutlich größer ist als der andere. Die Benutzer können den Divider interaktiv verschieben, aber die Ausgangsverteilung betont ein dominantes Paneel.

Typische Merkmale:

• Häufige 25/75- oder 30/70-Aufteilung

• Der kleinere Bereich dient oft als Sidebar, Vorschau oder Navigation

• Ideal für Fokus auf Hauptinhalt bei gleichzeitiger Kontextanzeige

Vorteile:

• Verstärkt visuelle Hierarchie

• Benutzerfreundlich, wenn einer der Bereiche nur unterstützenden Inhalt enthält

<div id="split-container-2" style="display: flex; height: 200px; width: 100%;">
  <div id="left-panel-2" style="background-color: lightyellow; width: 75%;"></div>
  <div id="divider-2" style="width: 5px; cursor: ew-resize; background: gray;"></div>
  <div id="right-panel-2" style="background-color: lightblue; flex-grow: 1;"></div>
</div>

<script>
  const divider2 = document.getElementById("divider-2");
  const left2 = document.getElementById("left-panel-2");
  const container2 = document.getElementById("split-container-2");

  divider2.addEventListener("mousedown", function (e) {
    document.onmousemove = function (e) {
      const containerX = container2.getBoundingClientRect().left;
      const containerWidth = container2.offsetWidth;
      let newLeftWidth = e.clientX - containerX;
      if (newLeftWidth < 0) newLeftWidth = 0;
      if (newLeftWidth > containerWidth - 10) newLeftWidth = containerWidth - 10;
      left2.style.width = newLeftWidth + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  });
</script>

Horizontal Split Panel

Die Paneele sind übereinander (von oben nach unten) angeordnet, anstatt nebeneinander. Ein horizontaler Divider (Dragbar) trennt die Panels, und Nutzer können diesen vertikal verschieben, um die Höhe der Bereiche anzupassen.

Typische Merkmale:

• Oben/Unten-Struktur

• Häufig genutzt in Texteditoren, Terminal-Ansichten oder für Live-Previews

Vorteile:

• Nützlich bei Inhalten, die vertikal scrollen (z. B. Text, Code)

• Eignet sich gut für mobile oder schmalere Viewports

<div id="split-container-3" style="display: flex; flex-direction: column; height: 400px; width: 100%;">
  <div id="top-panel-3" style="background-color: lightgreen; height: 50%;"></div>
  <div id="divider-3" style="height: 5px; cursor: ns-resize; background: gray;"></div>
  <div id="bottom-panel-3" style="background-color: lightcoral; flex-grow: 1;"></div>
</div>

<script>
  const divider3 = document.getElementById("divider-3");
  const top3 = document.getElementById("top-panel-3");

  divider3.addEventListener("mousedown", function (e) {
    document.onmousemove = function (e) {
      const containerTop = document.getElementById("split-container-3").getBoundingClientRect().top;
      const containerHeight = document.getElementById("split-container-3").offsetHeight;
      let newTopHeight = e.clientY - containerTop;
      if (newTopHeight < 0) newTopHeight = 0;
      if (newTopHeight > containerHeight - 10) newTopHeight = containerHeight - 10;
      top3.style.height = newTopHeight + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  });
</script>

Nested Split Panel

Dies ist eine verschachtelte Struktur: Ein Split Panel enthält innerhalb eines seiner Panels ein weiteres Split Panel. Dadurch können horizontale und vertikale Aufteilungen kombiniert werden. Diese Art ist besonders in komplexeren Webanwendungen nützlich.

Typische Merkmale:

• Kombination aus vertikalem und horizontalem Layout

• Häufige Anwendung in Dashboards oder Datenverwaltungstools

• Interaktive Dragbars in beide Richtungen

Vorteile:

• Flexibles Layout mit mehreren Zonen

• Ermöglicht gleichzeitige Darstellung und Steuerung komplexer Inhalte

<div id="split-container-4" style="height: 400px; width: 100%; display: flex; flex-direction: column;">

  <!-- Top Half: Vertical Split -->
  <div id="top-container-4" style="display: flex; height: 50%;">
    <div id="top-left-4" style="background-color: lightcyan; width: 50%;"></div>
    <div id="vertical-divider-4" style="width: 5px; cursor: ew-resize; background: gray;"></div>
    <div id="top-right-4" style="background-color: lightpink; flex-grow: 1;"></div>
  </div>

  <!-- Horizontal Divider -->
  <div id="horizontal-divider-4" style="height: 5px; cursor: ns-resize; background: gray;"></div>

  <!-- Bottom Half -->
  <div id="bottom-panel-4" style="background-color: lightgray; flex-grow: 1;"></div>

</div>

<script>
  // --- Horizontal Split Logic ---
  const horizontalDivider4 = document.getElementById("horizontal-divider-4");
  const topContainer4 = document.getElementById("top-container-4");
  const container4 = document.getElementById("split-container-4");

  horizontalDivider4.addEventListener("mousedown", function () {
    document.onmousemove = function (e) {
      const containerTop = container4.getBoundingClientRect().top;
      const containerHeight = container4.offsetHeight;
      let newTopHeight = e.clientY - containerTop;
      if (newTopHeight < 0) newTopHeight = 0;
      if (newTopHeight > containerHeight - 10) newTopHeight = containerHeight - 10;
      topContainer4.style.height = newTopHeight + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  });

  // --- Vertical Split Logic (inside Top Half) ---
  const verticalDivider4 = document.getElementById("vertical-divider-4");
  const topLeft4 = document.getElementById("top-left-4");
  const topContainer4Rect = document.getElementById("top-container-4");

  verticalDivider4.addEventListener("mousedown", function () {
    document.onmousemove = function (e) {
      const containerX = topContainer4Rect.getBoundingClientRect().left;
      const containerWidth = topContainer4Rect.offsetWidth;
      let newLeftWidth = e.clientX - containerX;
      if (newLeftWidth < 0) newLeftWidth = 0;
      if (newLeftWidth > containerWidth - 10) newLeftWidth = containerWidth - 10;
      topLeft4.style.width = newLeftWidth + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  });
</script>

Custom Divider

In dieser Variante hat der Divider ein individuelles Design, das über die Standard-Dragbar hinausgeht. Das kann sich auf Farbe, Form oder zusätzliche Funktionen (z. B. Buttons, Icons) beziehen. Die Interaktivität bleibt erhalten, aber das Erscheinungsbild ist einzigartig gestaltet.

Typische Merkmale:

• Individuelle UI-Gestaltung (z. B. runde Griffe, Pfeile)

• Oft Teil von markenspezifischem Interface

Vorteile:

• Verbessert die visuelle Ästhetik

• Bessere Nutzerführung durch visuelle oder funktionale Erweiterung

<div id="split-container-5" style="display: flex; height: 200px; width: 100%;">
  <div id="left-panel-5" style="background-color: lavender; width: 50%;"></div>

  <!-- Modern Minimal Divider -->
  <div id="divider-5" style="
    width: 10px;
    cursor: ew-resize;
    background-color: transparent;
    position: relative;
  ">
    <div style="
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 40px;
      width: 2px;
      background-color: #666;
      border-radius: 1px;
      box-shadow: 0 0 4px rgba(0,0,0,0.1);
    "></div>
  </div>

  <div id="right-panel-5" style="background-color: mistyrose; flex-grow: 1;"></div>
</div>

<script>
  const divider5 = document.getElementById("divider-5");
  const left5 = document.getElementById("left-panel-5");
  const container5 = document.getElementById("split-container-5");

  divider5.addEventListener("mousedown", function () {
    document.onmousemove = function (e) {
      const containerX = container5.getBoundingClientRect().left;
      const containerWidth = container5.offsetWidth;
      let newLeftWidth = e.clientX - containerX;
      if (newLeftWidth < 0) newLeftWidth = 0;
      if (newLeftWidth > containerWidth - 10) newLeftWidth = containerWidth - 10;
      left5.style.width = newLeftWidth + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  });
</script>

Link als ZIP-Datei:

split-panel.zip

Links CodePen.io

https://codepen.io/chanmin123/pen/MYYzorx

Quellen

https://www.smashingmagazine.com/2022/05/whats-that-dev-tool/
https://codepen.io/pamcy/pen/QzbYJG
https://codepen.io/rstrahl/pen/eJZQej
https://www.w3schools.com/howto/howto_css_split_screen.asp
https://backers.webawesome.com/docs/components/split-panel/
https://shoelace.style/components/split-panel