Introduction

Un composant de mise en page qui divise le contenu en panneaux redimensionnables séparés par des poignées de déplacement.

Utilisation

Répartiteur de base

import { Splitter } from "../components/ui";

export default function MyPage() {
  return (
    <Splitter
      orientation="horizontal"
      panels={[
        { id: "left", content: <aside>Sidebar</aside> },
        { id: "right", content: <main>Content</main> },
      ]}
    />
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc splitter dans Page Builder (content/pages/*.json). Rend toujours statique (interactive={false}, pas de glisser pour redimensionner) — le contenu d'un panneau est un JSX imbriqué arbitrairement, qui ne peut pas traverser la limite de sérialisation prop de l'île comme le peuvent les enfants :

{
  "type": "splitter",
  "orientation": "horizontal",
  "panels": [
    { "id": "left", "content": [{ "type": "text", "content": "Left panel" }] },
    { "id": "right", "content": [{ "type": "text", "content": "Right panel" }] }
  ]
}

Propriétés

Séparateur

Propriété	Type	Description
panels	PanelConfig[]	Les panneaux à rendre (obligatoire).

| orientation | `"horizontal" \ | "verticale"` | Layout direction of the panels. |

| interactive | boolean | Activez le glisser-redimensionner côté client. |

| defaultSize | `{ id: string \ | nombre; taille : nombre }[]` | Initial sizes (interactive mode). | | size | `{ id: string \ | nombre; taille : nombre }[]` | Controlled sizes (interactive mode). | | onSizeChange | `(sizes: { id: string \ | nombre; taille : nombre }[]) => vide` | Callback when sizes change. |

| resizeTriggerClass | string | Classes CSS personnalisées pour les poignées de redimensionnement. | | class | string | Classes CSS personnalisées pour l'élément racine. |

| style | `Record<string, string \ | numéro>` | Inline styles for the root element. |

| id | string | ID personnalisé pour l’élément racine. |

Configuration du panneau

Propriété	Type	Description

| id | `string \ | numéro` | Unique identifier for the panel. | | content | `JSX.Element \ | chaîne` | Content rendered inside the panel. |

| class | string | Classes CSS personnalisées pour le panneau. |

| style | `Record<string, string \ | numéro>` | Inline styles for the panel. |