Visão geral

O Resizable usa react-resizable-panels para criar layouts com divisores arrastáveis.

Horizontal

Painel esquerdo

Painel direito

Vertical

Painel superior

Painel inferior

Import

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

Padrão de implementação

Estrutura base do Resizable.

Layout resizável 3 painéis

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={20} minSize={15}>
    {/* Sidebar */}
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={60}>
    {/* Conteúdo principal */}
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={20} minSize={15}>
    {/* Painel de propriedades */}
  </ResizablePanel>
</ResizablePanelGroup>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter