Einführung

Eine strukturelle Layout-Komponente, die den Raum in mehrere getrennte Inhaltsbereiche unterteilt, die durch hochkontrastreiche visuelle Trennlinien getrennt sind. Sie dient dazu, komplexe Unterabschnitte oder Sidebars ordentlich innerhalb eines einheitlichen Container-Blocks zu gruppieren.

Die Splitter-Komponente ist vollständig als splitter-Block im Page Builder integriert. Dies ermöglicht es Redakteuren und Entwicklern, Layouts direkt im CMS einfach in horizontal nebeneinander oder vertikal gestapelte Bereiche zu strukturieren.

Verwendung

Diese Beispiele veranschaulichen, wie Inhaltsredakteure anpassbare Splitter-Container konfigurieren und strukturieren.

1. Horizontaler Dashboard-Splitter

Unterteilt das Layout in eine linke Navigations-/Informationsleiste und einen rechten Hauptinhaltsbereich. Dies eignet sich ideal für Arbeitsbereich-Layouts, technische Dokumentationsseiten oder nebeneinander angeordnete Produktpräsentationen.

{
  "type": "splitter",
  "orientation": "horizontal",
  "panels": [
    {
      "id": "left",
      "content": [
        {
          "blockType": "text",
          "content": "Left Panel (Sidebar)"
        }
      ]
    },
    {
      "id": "right",
      "content": [
        {
          "blockType": "text",
          "content": "Right Panel (Main Content)"
        }
      ]
    }
  ]
}

2. Vertikaler gestapelter Splitter

Stapelt Inhaltsbereiche vertikal, getrennt durch eine horizontale Trennlinie. Ideal zur Aufteilung von Code-Playgrounds, gestapelten Inhalts-Feeds oder Dashboard-Abschnitten mit Vorschau und Editor.

{
  "type": "splitter",
  "orientation": "vertical",
  "panels": [
    {
      "id": "top",
      "content": [
        {
          "blockType": "text",
          "content": "Top Section (Code / Editor)"
        }
      ]
    },
    {
      "id": "bottom",
      "content": [
        {
          "blockType": "text",
          "content": "Bottom Section (Live Preview)"
        }
      ]
    }
  ]
}

Eigenschaften

Entwicklerhinweise & Barrierefreiheit

• Statische Inhaltskompilierung: Um Null-Hydrations-Verzögerung und Spitzenleistung zu garantieren, wird der über den CMS Page Builder kompilierte Splitter-Block immer im statischen Präsentationsmodus gerendert (interactive={false}). Da der content eines Panels beliebige verschachtelte JSX-Blockelemente enthält, verhindert das Statischbleiben die Serialisierungsgrenz-Probleme, die bei der Island-Hydration auftreten.
• Reines CSS Flexbox-Layout: Statische Splitter-Layouts werden als leichte, reine CSS-Flexbox-Zeilen oder -Spalten kompiliert. Dies eliminiert die Notwendigkeit jeglicher JavaScript-Layout-Ausführung beim Laden und vermeidet Layoutverschiebungen (CLS) vollständig.
• WAI-ARIA-Layout-Rollen: Erzeugt semantische Layout-Attribute, die Panel-Gruppierungen klar hervorheben. Die horizontalen und vertikalen Trennlinien werden zu Standard-Trennelementen (role="separator") kompiliert, was Screenreader-Nutzern das Verständnis von Layoutübergängen erleichtert.