Como ele é
Lembra a janela de um editor de código dividida em quatro áreas. Na demonstração, um explorador de arquivos fica à esquerda, o editor com código colorido no centro, um terminal azul-marinho logo abaixo e um painel de registros à direita. Cada área tem um cabeçalho em letras pequenas e, quando pode recolher, um botão de seta. As divisões são linhas finas que ganham a cor de destaque, anil por padrão, quando o mouse passa. Arrastar move a divisão na hora, e um painel recolhido fica só com o cabeçalho ou vira uma aba estreita para reabrir. Em telas estreitas, as áreas se empilham na vertical.
Você pode estar procurando isto se pediu algo assim
- tela dividida em partes que eu consigo aumentar arrastando a linha do meio
- layout igual ao do VS Code com barra lateral, editor e terminal
- painel lateral que dá para recolher e abrir de novo
- dividir a página em colunas redimensionáveis para uma ferramenta interna
- área de trabalho com painéis ajustáveis que lembra o tamanho que a pessoa deixou
- barra de arrastar entre duas áreas para mudar a largura
- dashboard técnico com seções que o usuário redimensiona
Também chamado de
- painéis redimensionáveis
- tela dividida
- layout de IDE
- painel recolhível
- split view
- resizable panels
- split pane
- resizable layout
Quando usar
- IDEs, playgrounds de código e editores que rodam no navegador
- Ferramentas internas com lista, detalhe e prévia lado a lado
- Dashboards técnicos em que cada pessoa ajusta o espaço de cada área
- Painéis de administração que precisam lembrar o layout entre visitas
Quando evitar
- Sites de conteúdo e landing pages, em que painéis ajustáveis só confundem
- Telas pensadas só para celular, onde a divisão vira pilha e perde o sentido
Como pedir para a sua IA
Crie um layout de painéis redimensionáveis estilo IDE para a minha ferramenta interna: lista à esquerda, conteúdo no centro e prévia à direita, com divisores arrastáveis e operáveis pelo teclado, painéis que recolhem, tamanhos salvos no navegador e empilhamento no celular.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Split Panes
Como coloco meu conteúdo dentro do Split Panes?
Você descreve a árvore de divisões na prop layout, com linhas e colunas aninhadas, e cada painel recebe id, título, tamanho e limites mínimo e máximo. O conteúdo entra por slots com o mesmo id do painel, e o Split Panes informa a largura, a altura e se o painel está recolhido.
O Split Panes é acessível pelo teclado?
Sim. Cada divisor do Split Panes é um separador focável: as setas movem a divisão em passos de 16 pixels, Shift multiplica o passo por quatro, Home e End levam ao mínimo e ao máximo e Enter recolhe ou abre o painel. O leitor de tela ouve o tamanho em porcentagem.
O Split Panes lembra o tamanho que a pessoa deixou?
Lembra quando você define a prop persistKey: o Split Panes salva os tamanhos e os painéis recolhidos no localStorage, protegido contra modo privado e dados corrompidos. Sem essa prop, o layout volta ao padrão a cada visita, e você ainda pode ler e restaurar o estado pelos métodos getState e setState.
