Introducción

Un componente de diseño estructural que divide el espacio en múltiples áreas de contenido distintas separadas por divisores visuales de alto contraste. Está diseñado para agrupar subsecciones complejas o barras laterales de forma ordenada dentro de un bloque contenedor unificado.

El componente Splitter está totalmente integrado como un bloque splitter en el Page Builder. Esto permite a los editores de contenido y desarrolladores estructurar fácilmente diseños en paneles horizontales uno al lado del otro o apilados verticalmente directamente en el CMS.

Uso

Estos ejemplos ilustran cómo los editores de contenido configuran y estructuran contenedores divisores redimensionables.

1. Divisor de panel horizontal

Divide el diseño en una barra de navegación/información izquierda y un área de contenido principal derecha. Ideal para diseños de espacios de trabajo, páginas de documentación técnica o exhibiciones de productos uno al lado del otro.

{
  "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. Divisor apilado vertical

Apila las áreas de contenido verticalmente, separadas por una línea divisoria horizontal. Ideal para dividir áreas de juego de código, fuentes de contenido apiladas o secciones de panel con vista previa y 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)"
        }
      ]
    }
  ]
}

Propiedades

Notas para desarrolladores y accesibilidad

• Compilación de contenido estático: Para garantizar una latencia de hidratación nula y un rendimiento máximo, el bloque Splitter compilado a través del CMS Page Builder siempre se renderiza en modo de presentación estática (interactive={false}). Dado que el content de un panel contiene elementos de bloque JSX anidados arbitrarios, mantenerlo estático evita los problemas de límite de serialización que ocurren durante la hidratación de la isla.
• Flexbox de diseño CSS puro: Los diseños Splitter estáticos se compilan como filas o columnas Flexbox CSS puras y ligeras. Esto elimina la necesidad de cualquier ejecución de diseño JavaScript al cargar, evitando por completo el cambio de diseño (CLS).
• Roles de diseño WAI-ARIA: Genera atributos de diseño semánticos que señalan claramente las agrupaciones de paneles. Las líneas divisoras horizontales y verticales se compilan en separadores estándar (role="separator"), ayudando a los usuarios de lectores de pantalla a comprender las transiciones de diseño.