Componentes

Resizable

Painéis redimensionáveis lado a lado.

Dados e layout

Carregando demonstração…

Código da demo
"use client";

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

export function Demo() {
  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="max-w-md rounded-md border border-border"
    >
      <ResizablePanel defaultSize={50}>
        <div className="flex h-32 items-center justify-center p-fe-3 fe-body">
          Painel A
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={50}>
        <div className="flex h-32 items-center justify-center p-fe-3 fe-body">
          Painel B
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}
Acessibilidade
Handle focável; anuncie orientação; teclado se suportado.
Importar
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@financeequity/ui/resizable"

Neste repositório:

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable"
Dependências
react-resizable-panels