DS | Adila.coComponentes
Resizable
Componente resizable do design system adila.co.
Painel A
Painel B
Instalação
bun add @adila-sh/uiUso
Defina direction (horizontal ou vertical) no grupo e uma altura/largura no
contêiner. ResizableHandle aceita withHandle para exibir a alça de arraste.
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from '@adila-sh/ui';
export function Example() {
return (
<div className="h-48 w-full max-w-md">
<ResizablePanelGroup direction="horizontal" className="rounded-md border">
<ResizablePanel defaultSize={40}>
<div className="flex h-full items-center justify-center p-4 text-sm">Barra lateral</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={60}>
<div className="flex h-full items-center justify-center p-4 text-sm">Conteúdo</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
);
}Dependências
react-resizable-panels