Resizablestandard
패널 사이의 경계를 끌어 크기를 바꾸는 크기 조절 레이아웃(resizable)입니다. shadcn base-nova 의 stock 아이템이며 `react-resizable-panels` 위에 서 있습니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/resizableDefault
resizable-example.tsx
"use client"
import * as React from "react"import type { Layout } from "react-resizable-panels"
import { Example, ExampleWrapper,} from "@/components/example"import { ResizableHandle, ResizablePanel, ResizablePanelGroup,} from "@/components/ui/resizable"
export default function ResizableExample() { return ( <ExampleWrapper> <ResizableHorizontal /> <ResizableVertical /> <ResizableWithHandle /> <ResizableNested /> <ResizableControlled /> </ExampleWrapper> )}
function ResizableHorizontal() { return ( <Example title="Horizontal"> <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] rounded-lg border" > <ResizablePanel defaultSize="25%"> <div className="flex h-full items-center justify-center overflow-hidden p-2"> <span className="font-semibold">Sidebar</span> </div> </ResizablePanel> <ResizableHandle /> <ResizablePanel defaultSize="75%"> <div className="flex h-full items-center justify-center overflow-hidden p-2"> <span className="font-semibold">Content</span> </div> </ResizablePanel> </ResizablePanelGroup> </Example> )}
function ResizableVertical() { return ( <Example title="Vertical"> <ResizablePanelGroup orientation="vertical" className="min-h-[200px] rounded-lg border" > <ResizablePanel defaultSize="25%"> <div className="flex h-full items-center justify-center overflow-hidden p-2"> <span className="font-semibold">Header</span> </div> </ResizablePanel> <ResizableHandle /> <ResizablePanel defaultSize="75%"> <div className="flex h-full items-center justify-center overflow-hidden p-2"> <span className="font-semibold">Content</span> </div> </ResizablePanel> </ResizablePanelGroup> </Example> )}
function ResizableWithHandle() { return ( <Example title="With Handle"> <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] rounded-lg border" > <ResizablePanel defaultSize="25%"> <div className="flex h-full items-center justify-center overflow-hidden p-2"> <span className="font-semibold">Sidebar</span> </div> </ResizablePanel> <ResizableHandle withHandle /> <ResizablePanel defaultSize="75%"> <div className="flex h-full items-center justify-center overflow-hidden p-2"> <span className="font-semibold">Content</span> </div> </ResizablePanel> </ResizablePanelGroup> </Example> )}
function ResizableNested() { return ( <Example title="Nested"> <ResizablePanelGroup orientation="horizontal" className="rounded-lg border" > <ResizablePanel defaultSize="50%"> <div className="flex h-[200px] items-center justify-center overflow-hidden p-2"> <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 overflow-hidden p-2"> <span className="font-semibold">Two</span> </div> </ResizablePanel> <ResizableHandle /> <ResizablePanel defaultSize="75%"> <div className="flex h-full items-center justify-center overflow-hidden p-2"> <span className="font-semibold">Three</span> </div> </ResizablePanel> </ResizablePanelGroup> </ResizablePanel> </ResizablePanelGroup> </Example> )}
function ResizableControlled() { const [layout, setLayout] = React.useState<Layout>({})
return ( <Example title="Controlled"> <ResizablePanelGroup orientation="horizontal" className="min-h-[200px] rounded-lg border" onLayoutChange={setLayout} > <ResizablePanel defaultSize="30%" id="left" minSize="20%"> <div className="flex h-full flex-col items-center justify-center gap-2 overflow-hidden p-2"> <span className="font-semibold"> {Math.round(layout.left ?? 30)}% </span> </div> </ResizablePanel> <ResizableHandle /> <ResizablePanel defaultSize="70%" id="right" minSize="30%"> <div className="flex h-full flex-col items-center justify-center gap-2 overflow-hidden p-2"> <span className="font-semibold"> {Math.round(layout.right ?? 70)}% </span> </div> </ResizablePanel> </ResizablePanelGroup> </Example> )}