Lumina

Component · Visual

Resizable

Painéis arrastáveis pra ajustar largura ou altura. Use em IDEs, dashboards complexos, split-views. Cada divisão é uma handle, com ou sem grip visível.

react-resizable-panelssource

Import

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@nimbuslab/lumina/components/resizable"

Horizontal split

Dois painéis lado a lado. Handle com grip visível, hint pra arrastar.

SidebardefaultSize 40, minSize 20
Conteúdo principalarraste a barra ←→

Vertical split

Mesma ideia, eixo vertical. Use pra editor + console, lista + detalhe.

Editorarraste a barra ↑↓
ConsoledefaultSize 40, minSize 15

Three-pane (IDE layout)

Padrão clássico: navegador de arquivos, editor, inspector. Aninhado pra ganhar três áreas com controle independente.

Explorermin 12, max 35
Editorárea principal
Terminalmin 15
Inspectormin 15

Sem handle visível

A handle existe e funciona, só não mostra o grip. Use quando o split for evidente pelo conteúdo (ex: lista + preview).

Lista
Previewaproxima do divisor pra arrastar

Receita

Como usar minSize, maxSize e o aninhamento sem perder o controle.

ide-layout.tsxTSX

Tokens

  • Container: overflow-hidden rounded-xl border border-border/40 pra delimitar a área e não vazar conteúdo.
  • Handle: 1 px de espessura, hover acende border-primary/40 via CSS interno do componente.
  • withHandle: mostra o grip (4 pontinhos), prefira em splits onde o usuário precisa achar a divisão.
  • minSize / maxSize: em porcentagem do ResizablePanelGroup, não em pixels.

Anti-padrões

  • minSize em pixels. O componente espera porcentagem, ignora valores absolutos.
  • Resizable sem altura definida no container. O h-* tem que estar na ResizablePanelGroup, senão colapsa.
  • Mais de 3 splits no mesmo eixo. Vira persiana, ninguém arrasta. Aninhe vertical dentro de horizontal quando precisar de mais áreas.
  • withHandle em todas as handles. Polui. Use só onde a divisão não é óbvia pelo conteúdo.