Introduction

Un composant de mise en page structurel qui divise l'espace en plusieurs zones de contenu distinctes séparées par des séparateurs visuels à fort contraste. Il est conçu pour regrouper proprement des sous-sections complexes ou des barres latérales au sein d'un bloc conteneur unifié.

Le composant Splitter est entièrement intégré en tant que bloc splitter dans le Page Builder. Cela permet aux éditeurs de contenu et aux développeurs de structurer facilement des mises en page en panneaux horizontaux côte à côte ou empilés verticalement directement dans le CMS.

Utilisation

Ces exemples illustrent comment les éditeurs de contenu configurent et structurent des conteneurs de séparation redimensionnables.

1. Séparateur de tableau de bord horizontal

Divise la mise en page en une barre de navigation/informations à gauche et une zone de contenu principal à droite. Idéal pour les espaces de travail, les pages de documentation technique ou les présentations de produits côte à côte.

{
  "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. Séparateur empilé vertical

Empile les zones de contenu verticalement, séparées par une ligne de division horizontale. Idéal pour diviser des espaces de jeu de code, des flux de contenu empilés ou des sections de tableau de bord avec aperçu et éditeur.

{
  "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)"
        }
      ]
    }
  ]
}

Propriétés

Notes pour les développeurs et accessibilité

• Compilation de contenu statique : Pour garantir une latence d'hydratation nulle et des performances maximales, le bloc Splitter compilé via le CMS Page Builder est toujours rendu en mode de présentation statique (interactive={false}). Comme le content d'un panneau contient des éléments de bloc JSX imbriqués arbitraires, le maintenir statique évite les problèmes de limite de sérialisation qui surviennent lors de l'hydratation de l'îlot.
• Mise en page Flexbox CSS pure : Les mises en page Splitter statiques sont compilées en lignes ou colonnes Flexbox CSS pures et légères. Cela élimine tout besoin d'exécution de mise en page JavaScript au chargement, évitant complètement le décalage de mise en page (CLS).
• Rôles de mise en page WAI-ARIA : Génère des attributs de mise en page sémantiques mettant clairement en évidence les regroupements de panneaux. Les lignes de séparation horizontales et verticales sont compilées en séparateurs standard (role="separator"), aidant les utilisateurs de lecteurs d'écran à comprendre les transitions de mise en page.