# Split Panes Tela dividida em áreas que você aumenta, diminui ou recolhe arrastando as linhas entre elas, como num editor de código. > O Split Panes é um componente exclusivo do THM Componentes que divide a tela em painéis redimensionáveis, no estilo dos editores de código. Arrastar um divisor empurra os vizinhos, levar um painel abaixo da metade do mínimo o recolhe e cada divisor também responde às setas do teclado. Serve para IDEs no navegador, ferramentas internas e painéis técnicos. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/split-panes/ ## 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 ```text 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. ## Componentes relacionados - [Code Editor](https://vibecode.thmtecnologia.com/componentes/code-editor/): Editor de código com cores por linguagem, números de linha, busca e blocos que recolhem, direto na sua página. - [Terminal](https://vibecode.thmtecnologia.com/componentes/terminal/): Janela de terminal escura em que a pessoa digita comandos, vê respostas coloridas e acompanha um deploy de demonstração. - [Diff Viewer](https://vibecode.thmtecnologia.com/componentes/diff-viewer/): Mostra o que mudou entre duas versões de um código ou texto, em vermelho e verde, para aceitar ou rejeitar cada trecho. - [File Tree](https://vibecode.thmtecnologia.com/componentes/file-tree/): Lista de pastas e arquivos que abre e fecha com um clique, como o explorador de um editor de código. - [Data Grid](https://vibecode.thmtecnologia.com/componentes/data-grid/): Tabela que rola milhares de linhas sem travar, com filtros, ordenação, edição e copiar e colar com planilhas. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.