Documentação
Resizable
Grupos de paineis e layouts redimensionaveis e acessiveis, com suporte a teclado.
Carregando…
"use client";
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@blips/ui/components/resizable";
export default function ResizableDemo() {
return (
<ResizablePanelGroup
orientation="horizontal"
className="max-w-md rounded-lg border md:min-w-[450px]"
>
<ResizablePanel defaultSize={50}>
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">One</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={50}>
<ResizablePanelGroup orientation="vertical">
<ResizablePanel defaultSize={25}>
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Two</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={75}>
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Three</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
);
}
Sobre
O componente Resizable e construido sobre o react-resizable-panels de bvaughn.
Instalacao
Uso
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@blips/ui/components/resizable"<ResizablePanelGroup orientation="horizontal">
<ResizablePanel>Um</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Dois</ResizablePanel>
</ResizablePanelGroup>Exemplos
Vertical
Use orientation="vertical" para redimensionamento vertical.
Carregando…
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@blips/ui/components/resizable";
export default function ResizableDemo() {
return (
<ResizablePanelGroup
orientation="vertical"
className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
>
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Header</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Content</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
);
}
Alca de arraste
Use a prop withHandle no ResizableHandle para exibir uma alca de arraste visivel.
Carregando…
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@blips/ui/components/resizable";
export default function ResizableHandleDemo() {
return (
<ResizablePanelGroup
orientation="horizontal"
className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
>
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Sidebar</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Content</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
);
}
Referencia da API
Consulte a documentacao do react-resizable-panels.
Changelog
2025-02-02 react-resizable-panels v4
Atualizado para o react-resizable-panels v4. Consulte as notas da versao v4.0.0 para os detalhes completos.
Se voce usa os primitives do react-resizable-panels diretamente, observe as seguintes mudancas:
Nota: Os componentes wrapper do shadcn/ui (
ResizablePanelGroup,ResizablePanel,ResizableHandle) permanecem inalterados.