Introdução

Um componente de layout estrutural que divide o espaço em múltiplas áreas de conteúdo distintas separadas por divisores visuais de alto contraste. Ele é projetado para agrupar subseções complexas ou barras laterais de forma organizada dentro de um bloco de contêiner unificado.

O componente Splitter está totalmente integrado como um bloco splitter no Page Builder. Isso permite que editores de conteúdo e desenvolvedores estruturem facilmente layouts em painéis horizontais lado a lado ou empilhados verticalmente diretamente no CMS.

Uso

Estes exemplos ilustram como os editores de conteúdo configuram e estruturam contêineres divisores redimensionáveis.

1. Divisor de painel horizontal

Divide o layout em uma barra de navegação/informações à esquerda e uma área de conteúdo principal à direita. Ideal para layouts de espaços de trabalho, páginas de documentação técnica ou exibições de produtos lado a lado.

{
  "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 empilhado vertical

Empilha as áreas de conteúdo verticalmente, separadas por uma linha divisória horizontal. Ideal para dividir playgrounds de código, feeds de conteúdo empilhados ou seções de painel com visualização e 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)"
        }
      ]
    }
  ]
}

Propriedades

Notas para desenvolvedores e acessibilidade

• Compilação de conteúdo estático: Para garantir latência de hidratação zero e desempenho máximo, o bloco Splitter compilado via CMS Page Builder sempre é renderizado no modo de apresentação estática (interactive={false}). Como o content de um painel contém elementos de bloco JSX aninhados arbitrários, mantê-lo estático evita os problemas de limite de serialização que ocorrem durante a hidratação da ilha.
• Layout Flexbox CSS puro: Layouts Splitter estáticos são compilados como linhas ou colunas Flexbox CSS puras e leves. Isso elimina a necessidade de qualquer execução de layout JavaScript no carregamento, evitando completamente o deslocamento de layout (CLS).
• Funções de layout WAI-ARIA: Gera atributos de layout semânticos que destacam claramente os agrupamentos de painéis. As linhas divisórias horizontais e verticais são compiladas em separadores padrão (role="separator"), ajudando usuários de leitores de tela a entenderem as transições de layout.